Styling

September 27, 2021, 12:45 pm

≫ Next: Filter without displaying in search box or do on tableserver based on get parameter

≪ Previous: Break the column by delimiter to distribute the values among rows.

I have taken over a project previously started by someone else and need to figure out which styling they used. I do not have access to that person to ask them. Is there a way to tell

The project is built with dataTables 1.9.0

dataTables is initialized like:

<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>

↧

Filter without displaying in search box or do on tableserver based on get parameter

October 14, 2021, 9:02 am

≫ Next: qr scanner integration for search button ?

≪ Previous: Styling

I have editor v 1.9.6.

Is ther a way to filter the datatables data such that if we pass in the url for example:

http://myDatatables.php?number=1234&accountName=place1

the "accountName" will filter for "place1" but the value is not displayed in the search filter

The other option I was thinking was just getting the url parameter and performing the query based off that value. I was hoping to find former options first. Any suggestions?

↧

qr scanner integration for search button ?

October 24, 2021, 8:24 am

≫ Next: Sorting a Column Loses Background Color Formatting

≪ Previous: Filter without displaying in search box or do on tableserver based on get parameter

How to add qr scanner for search button ?

I did see this (https://datatables.net/blog/2020-07-10)
but I want to add for search button.

Thank you.

↧

Sorting a Column Loses Background Color Formatting

November 9, 2021, 6:45 am

≫ Next: Inline editing with a checkbox cell only shows the checkbox without labels

≪ Previous: qr scanner integration for search button ?

There is an current issue where you set a background color on a cell and then sorting a column, it loses the background color you've already defined it. There are another post that help me but I have to do some modification to work for my script:
Link: https://datatables.net/forums/discussion/11627/sorting-a-column-loses-background-color-formatting

Final solution:

//This is for the current css style applied for the cells:

}
table.dataTable.display td.accuracyData1 {
background-color: seagreen;
}
table.dataTable.display td.accuracyData0 {
background-color: crimson;
}

//This is what I have to add for the sorting of columns keep the cell format color I wanted to:

table.dataTable.display tbody tr.even td.accuracyData1.sorting_1 {
background-color: seagreen;
}
table.dataTable.display tbody tr.odd td.accuracyData1.sorting_1 {
background-color: seagreen;
}

table.dataTable.display tbody tr.even td.accuracyData0.sorting_1 {
background-color: crimson;
}
table.dataTable.display tbody tr.odd td.accuracyData0.sorting_1 {
background-color: crimson;
}

Hope this solution help someone.

Marco Cáceres

↧

Inline editing with a checkbox cell only shows the checkbox without labels

November 11, 2021, 7:24 am

≫ Next: Import CSV Multirow Has The Same Value after SetValue on PreCreate

≪ Previous: Sorting a Column Loses Background Color Formatting

Using Editor 1.9.6

I have inline editing enable for this column that contains 4 checkbox values. When we select the row and hit the "Edit" button it shows it somewhat correctly (although it needs some css to align it correctly), image below:

However, when I try to quickly access through the row, I double click into the row and I only see 4 checkboxes without the labels, Image below of the cell:

Is there a way to add the labels so the user can quickly access this without have to go to the "edit" button?

↧

Import CSV Multirow Has The Same Value after SetValue on PreCreate

November 29, 2021, 10:06 pm

≫ Next: Can not download datatable editor 1.79.6 for nodeJS. Unknown package type

≪ Previous: Inline editing with a checkbox cell only shows the checkbox without labels

Description of problem:

Programming language: PHP

I'm using import csv via datatable and need process in some column before insert to table. The process is to get Description by Part No.

But when using the preCreate event, the inserted description value is always the same value for all rows. It seems like the setValue() is updating all rows with the last value get by getPartInfo() function.

Is there any solution ?

Code

                ->on('preCreate', function($editor, &$values) {
                    $partInfo = $this->getPartInfo($values['PART_NO'], $values['CONTRACT']);
                    $editor
                        ->field('DESCRIPTION')
                        ->setValue($partInfo['Description']);

Result

↧

Can not download datatable editor 1.79.6 for nodeJS. Unknown package type

December 9, 2021, 5:09 pm

≫ Next: Datatables IP-address sorting "full example"

≪ Previous: Import CSV Multirow Has The Same Value after SetValue on PreCreate

Server error ?

↧

Datatables IP-address sorting "full example"

December 24, 2021, 9:17 pm

≫ Next: processing text not appearing when using data: array, but does when making ajax call

≪ Previous: Can not download datatable editor 1.79.6 for nodeJS. Unknown package type

I am very new to html/javascript and I am struggling to have this fixed, would you please help!! I am trying to use DataTables jQuery plugin for sorting an IP-address column. I found followed many resources and but I couldn't full apply them as there is no full solution provided. I don't have a clue on how to define this column with the correct type:

"aoColumns": [
    null,
    { "sType": 'string-ip' },
    null
    ],

can someone fix the below code please?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create jquery databable easily</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/ip-address.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable({
            });
            });
        

    </script>

</head>
<body>
    <h2>Create jquery datatable easily</h2>
    
</body>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th id=name>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th id=ipaddress sType=string-ip>IP-Address</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>10.29.0.36</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>172.29.0.78</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>172.29.0.98</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>172.29.0.47</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>172.29.0.56</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>172.29.0.2</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>172.29.0.223</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>172.29.0.20</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>172.29.0.13</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>172.29.0.113</td>
                <td>$103,600</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>IP-address</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</html>

↧

processing text not appearing when using data: array, but does when making ajax call

December 30, 2021, 7:11 am

≫ Next: Input type number validation not working

≪ Previous: Datatables IP-address sorting "full example"

I have two ways to load datatables:

1- initially by making an ajax call when building the datatables. in the servlet I call I then store the json array in a session managed bean so I do not have to read the database everytime I call the page.
2 - when the managed bean contains the json array I read the values from the into a js variable and use that as datasource

hereby I can reduce the time to collect the data from 9 to 2 seconds.

However in situation 2 I do not get the processing message, which I get when making the ajax call.

Is that suppose to be?

Can I force that message to appear in situation 2?

Below is a snippet of the code in situation 2:

Code for situation 1 is: (I thought you were gonna ask)

The data string might look as followed:

'[{"obj":{"unid":"AE2E4C0DB863DB08C12587B90055F4D1","dateK":"10-24-2021","unit":"06109","comm":"06109","lvl":"sdd","gcn":"","resp":"Nu Present","name":"Nordic News Co","id":"00000000034664","lvlK":"Avslag","type":"PRIVATE"}},{"obj":{"unid":"E8E58FD3EB2453D2C12587BB004B5737","dateK":"4-18-2021","unit":"06409","comm":"06409","lvl":"bordlaggning","gcn":"","resp":"Heute Idag","name":"Universal Deutsche Gemeinte Unlimited","id":"00000000161479","lvlK":"Återremittering","type":"COMPANY"}},{"obj":{"unid":"A13C7AA174FF28B0C12587B90056E6EA","dateK":"10-3-2021","unit":"06325","comm":"06325","lvl":"bordlaggning","gcn":"","resp":"Manana Morgen","name":"Common Deutsche Gemeinte Inc","id":"00000000277853","lvlK":"DD","type":"CORPGROUP"}},{"obj":{"unid":"3DD65EBABE97C603C12587BB004B5D00","dateK":"4-6-2021","unit":"06142","comm":"06142","lvl":"avslag","gcn":"","resp":"Nu Present","name":"Red Firm Corp Co","id":"00000000486674","lvlK":"EDD","type":"PRIVATE"}},{"obj":{"unid":"5F0ECCC070EE16C5C12587B90056B4FC","dateK":"7-27-2021","unit":"06325","comm":"06325","lvl":"avslag","gcn":"","resp":"Past Förtiden","name":"Cosmic Hello World Online Enterprise","id":"00000000517436","lvlK":"DD","type":"CORPGROUP"}}]'

↧

Input type number validation not working

January 7, 2022, 5:50 am

≫ Next: Default sorting

≪ Previous: processing text not appearing when using data: array, but does when making ajax call

Hi, I have a dataTable with input field of type number. It should only allow values greater than 0 , however the validation isn't happening and the data gets submitted even with negative numbers. How can I make validation to work on the dataTable?

Here is the link to the fiddle : https://jsfiddle.net/s3hLdjv9/2/

↧

Default sorting

January 30, 2022, 4:05 pm

≫ Next: Drag and drop column(Reorder column) call server each time

≪ Previous: Input type number validation not working

I understand that you can alter the Default ordering by adding:

$('#example').DataTable({
order:[[3, 'desc'], [0, 'asc']]
});

But is there a way to alter to original order so that if a user selects a header it always sorts in descending order rather than in ascending order as happens now.

I have a lot of columns that are numeric which hold a lot of empty or zero values and the users have to click the header twice: once to sort in the default ascending order and the second time to sort in the descending order.

Ideally the first column would sort ascending as it is alphabetical, but all other columns should sort descending as they are numerical.

Milton.

↧

Drag and drop column(Reorder column) call server each time

February 2, 2022, 8:45 am

≫ Next: Or_where clause won't auto refresh anymore because of the or_where clause

≪ Previous: Default sorting

We have use serverside processing for datatable.

While we reorder column it raise sever call.(Nightly Build version)

Can we avoid this?

↧

Or_where clause won't auto refresh anymore because of the or_where clause

February 16, 2022, 8:18 am

≫ Next: ServerSide pagination working but diplaying all the data in single page, I am using V 1.9.4

≪ Previous: Drag and drop column(Reorder column) call server each time

Hello i have an or_where clause below that stops datatables editor from refresh after an edit has been made. Below is the code in quesiton. If i comment out the $q->or_where it will auto refresh.

->where( function ($q){                     
           $q->where(function ( $s ) {
                $s->where('Completed', 0);
                $s->where( "ifnull(inactiveflag,'')", '');
           });         
           $q->or_where( function ( $r ) {
                $r->where('Completed', 1);
                $r->where('cmbt_modified_date', 'DATE_ADD( NOW(), INTERVAL -1 DAY )', '>', false);
           });

↧

ServerSide pagination working but diplaying all the data in single page, I am using V 1.9.4

February 21, 2022, 7:30 am

≫ Next: modifying a row not getting updated to DB - row.invalidate()

≪ Previous: Or_where clause won't auto refresh anymore because of the or_where clause

dom: "Blfrtip",
serverSide: true,
processing: true,
fixedColumns: true,
scrollX: true,
paging: false,
scrollCollapse: true,
fnInitComplete: function(oSettings, json) {
loading(false);
setTableData(table.ajax.json().data);
//$(".dt-buttons .buttons-edit span").html("Edit");
if (typeof cb == "function") {
cb();
}
},

↧

modifying a row not getting updated to DB - row.invalidate()

March 24, 2022, 8:20 pm

≫ Next: How do you improve editor page load performance?

≪ Previous: ServerSide pagination working but diplaying all the data in single page, I am using V 1.9.4

I am trying to make a button that changes the value of a particular field ("status") for every selected row, and update to the database. I see the change happen on screen, but the change never gets written to the database, and I do not see a call to my update code in the network tab in the browser debugger. If I reload the page, the old value is there.

The part in question is the collection of buttons in a dropdown that lets you set the "status" field of selected rows to "active", "project", or "closed". I'm trying some different things in the 3 cases, and none trigger a call to my update script.

So- fundamental question- since the editor is working and calls my updateProjectRecord.php, why is this not called when I call either row.data(d) or row.invalidate() in my buttons?

Here are the editor and the datatable configurations (with some irrelevant parts skipped for brevity).


var editor = new $.fn.dataTable.Editor( {
    ajax: 'projecteditor/php/updateProjectRecord.php',
        table: '#project',
        fields: [
            {
                "label": "name:",
                "name": "name"
            },
    
            {
                "label": "status:",
                "name": "status",
                type:  "select",
            label: "Status:",
              options: [
                    "active",
                    "project",
                    "closed"
                ]
            },
            {
                "label": "city:",
                "name": "city"
            },
            {
                "label": "state:",
                "name": "state"
            }
        ]
  });


var table = $('#project').DataTable( {
    dom: 'Bfrtip',
    order: [1,'asc'],
    ajax: 'projecteditor/php/getProjectList.php',
    table: '#project',
    columns: [ ....... ],
    buttons: [
    { extend: 'create', editor: editor },
    { extend: 'edit',   editor: editor },
    { extend: 'remove', editor: editor },
    {
        extend: 'collection',
        autoClose: true,
        text: 'Set Selected To:',
        buttons: [
        {
            text: "Active",
            action: function ( e, dt, node, config ) {
                table.rows({ selected: true }).every( function ( rowIdx, tableLoop, rowLoop ) {
                    var d = this.data();
                    d.status = "active";
                    this.invalidate();
                });
                // Draw once all updates are done
                table.draw();
            }
        },
        {
            text: "Project",
            action: function ( e, dt, node, config ) {
                table.rows({ selected: true }).each( function ( index ) {
                    var row = table.row( index );
                    var data = row.data();
                    data.status = "project";
                    row.invalidate();
                });
                // Draw once all updates are done
                table.draw();
            }
        },
        {
            text: "Closed",
            action: function ( e, dt, node, config ) {
                table.rows({ selected: true }).every( function ( rowIdx, tableLoop, rowLoop ) {
                    var d = this.data();
                    d.status = "closed";

                    this.data(d);
                    this.invalidate();  // redundant
                    console.log(d.name);
                    console.log(rowIdx);
                    console.log(rowLoop);
                    console.log(this);
                });
                // Draw once all updates are done
                table.draw();
            }
        }
    ]               
}

↧

How do you improve editor page load performance?

March 28, 2022, 10:15 am

≫ Next: Search Fuction not found

≪ Previous: modifying a row not getting updated to DB - row.invalidate()

I have a number of forms varying in purpose and number of database fields from as little as 3 fields to over 100 fields, quite complex.

The forms with minimal fields load quickly, mostly < 3 seconds whereas those with many update field (100+) might take 12-13 seconds for the form to load. Even with 10-15 items in the table they take a long long time to load.

Is there anything that can be done to optimize the performance of the really big forms?

↧

Search Fuction not found

March 30, 2022, 3:03 pm

≫ Next: table.rows

≪ Previous: How do you improve editor page load performance?

I am trying to use the search function on a custom text box in a mvc c# application however I am having an issue
I am using datatable version Datatable version 1.9.4 I need to replace as I need to pass to the http ajax post method what the user searched for.. I dont no why the system is using quoes around the items as most the examples here do not if someone can explain that to be great. Also when I do type in my txt its not parsing the table.

Also is their anyway to find out what column datatables found the result in.

```
script type="text/javascript">

$(function () {

 var myTable =  $('#allSubmissions').DataTable({
     'iDisplayLength': 15,
     "bSort": true,
     "sPaginationType": "full_numbers",           
     "bLengthChange": false,
     "bDestroy": true,
     "bRetreive": true,
     "searching": true,
 });

 $('#search-inp').on('keyup', function () {
     myTable.search($(this).val()).draw();
 });
 });

</script>

Also How do I get my new search box in the location the old one was it was to the far right of the table

↧

table.rows

April 1, 2022, 8:43 am

≫ Next: Is there a DTE way to create 2 matching IDs in 2 separate tables when you add a row

≪ Previous: Search Fuction not found

How does one send the values of table.rows to a ajax post method and does the value of table.rows hold the pageintated data
I want to pass the data to .net mvc controller for futher minpulation after the user has typed but its to included the paginated filtered data to is that possible.

```
table.on('search.dt', function() {
//number of filtered rows
console.log(table.rows( { filter : 'applied'} ).nodes().length);
//filtered rows data as arrays
console.log(table.rows( { filter : 'applied'} ).data());
})

↧

Is there a DTE way to create 2 matching IDs in 2 separate tables when you add a row

April 17, 2022, 7:08 pm

≫ Next: Is the sorting-option for comma and decimal in 1.9.x also possible

≪ Previous: table.rows

I have a table which I refer to as a primary table because it is used in many different forms. It forms the basis on articles, blog posts, FAQ, testimonials other. Many, most of these share use of the same common fields. This works very well.

However I have an events form which the same core but only for this form there are about 30 additional fields. What I would like to do is move all the events-related fields to a separate table and link the 2 tables by a common ID. Something like articles and events tables

articles table:
id
title
slug
publish
etc.

events table:
id
event_title
event_date
event_time
etc.

simple query:

select
articles.id,
articles.title,
articles.slug,
events.event_title,
events.date,
events.time
from articles, events
where articles.ID = events.ID
-- and articles.ID = 100

Pretty simple query. What this does is eliminate a bunch of unneeded rubble from the articles table. The question is, when you create a NEW entry in DTE can you make it create the same ID in 2 tables?

↧