I have two tables. The parent table automatically selects the first row on page load and the child table filters the data depending on which parent table row has been clicked on. The on Click function works perfectly fine, however the child table does not filter as expected when the page initially loads and the first row of the parent table is auto-selected. I tried using .prop to force "selected" on the row, but it does not work. Any ideas? This is my code. Thanks:

    $('#parentTable').DataTable({
    "initComplete": function (settings, json) {             
                    parentTable.row(':eq(0)', { page: 'current' }).select();

    //COMMENTED OUT DOES NOT WORK 
    //var selRow = kTable.row(':eq(0)', { page: 'current' });
    //kTable.prop("selected", true);

    })

    var rowDat = parentTable.rows({ selected: true }).data();
    childTable.columns(1).search(rowDat.TaskName).draw();

Hello,
I've a datatable which display more than 100K rows from DB and it takes a long time to load them all.
I'd like to introduce a lazy loading with pagination.
I've read : Deferred loading of data, Server-side processing 1, Server-side processing 2. But I'm not sure about how to use it so it does not work.

I load my datatable from an ajax call to a java WebService which returns a json. When I add the property "serverSide: true" it looks like it's loading data but never ends and never display them.

I'd like to know how should I proceed to "add" a lazy loading to my process.

Here's my datatable :

function drawTable(){
    $.fn.dataTable.moment( 'YYYY-MM-DD HH:mm:ss.SSS' );
    currentTable = $('#dataTables').DataTable({
        responsive: false,
        serverSide: true,
        ajax: {
            "url": restURI + 'orch/search/events/',
            "contentType": "application/json",
            "type": "POST",
            "data": function ( d ) {
                return JSON.stringify(getDatasToSearch());
            },
            error: function(jqXHR, textStatus, errorThrown){
                manageAjaxError(jqXHR, textStatus, errorThrown)
            }
        },
        buttons: [
         'selectAll',
         'selectNone'
         ],
         language: {
             buttons: {
                 selectAll: "Select all items",
                 selectNone: "Select none"
             }
         },
         select: {
            selector: 'td:first-child',
            style: 'multi'
        },
        order: [0, 'desc'],
        aLengthMenu: [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
        iDisplayLength: 25,
        "columns": [
            { "data": "EVENT_ID", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "FLOW_ID", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "FLOW_NAME", "defaultContent": "", "sClass": "text-center limitedWidthFlNm" },
            { "data": "OBJECT_TYPE", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "OBJECT_NAME", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "OBJECT_VERSION", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "OBJECT_ITERATION", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "OPERATION_NAME", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "OPERATION_STATUS", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "OPERATION_MESSAGE", "defaultContent": "", "sClass": "text-center limitedWidth" },
            { "data": "CREATE_DATE", "defaultContent": "", "sClass": "text-center limitedWidth"},
            { "data": "UPDATE_DATE", "defaultContent": "", "sClass": "text-center limitedWidth " },
            { "data": null, "defaultContent": "<i class=\"fa fa-folder-open blue inline\" title=\"Explore files\"></i>&nbsp&nbsp&nbsp<i class=\"fa fa-eye blue inline\" title=\"Audit event\"></i><br/><i class=\"fa fa-retweet\" aria-hidden=\"true\" title='Resubmit this event'></i>&nbsp&nbsp&nbsp<i class=\"fa fa-ban\" aria-hidden=\"true\" title='Cancel this event'></i>", "bSortable": false, "sWidth": "85px", "sClass": "text-center unselectable limitedWidth"}
        ]
    });
}

Let me know if you need more information. Many thanks !

Edit : adding "deferRender": true reduce the time from 1m45 to 38 sec. Is it possible to have something better ?

do I use the datatables in database class manually

insert 
update 
delete
select 
row count 

how use this ?

how to get the error codes ?

Hi Everyone

I have a screen for listing all tests taken for a specific building for a specific inspection... all working fine.

On "First Load" say I have the following info:

If I use the "Edit" button to view and update the data it works fine, and updates correctly:

All works swimmingly. I then introduced a modal with a datatable with in-line editor to enter the "LEG Sample Results" on mass - so when the samples come back from the lab.. everything can be entered at once without having to open each test seperately. That works Great - and updates the table above correctly..... However, on testing the screen.. I noticed a problem. The data shown is EXACTLY the same as when the form opened, it is NOT reflecting the 2 changes I've already made:

If I reload the page again the above form is filled with the new data - any changes I make using this summary modal is reflexted in the main list... but updating from the main list does not update this "Sample Results" screen.

when I click on the button to open the modal "Sample Results" screen the following function is called:

     $('#LEGresultsModal').on('shown.bs.modal', function () {
        var table = $('#example').DataTable();
        table.draw() ;
        table.columns.adjust();

     });

NB: The above code is the only way I could get the column widths working correctly - thanks to Allan's help on a previous forum post.

Full(ish) code is as follows:

      $.fn.dataTable.ext.legacy.ajax = true;

      $(document).ready(function() {
         editor = new $.fn.dataTable.Editor( {
            ajax: "../server_side/scripts/ET_LEGresultsForProjectID.php?jobRef=<?=$jobRef?>",
            table: "#example",
            fields: [ { name: "tblLEGAssets.assetID" },
                      { name: "tblLEGAssets.theAssetOutletType" }, 
                      { name: "tblLEGAssets.osTypeOfSystem" }, 
                      { name: "tblLegAlgorithmTests.LPResults" },
                      { name: "tblLegAlgorithmTests.LPCFULevel" },
                      { name: "tblLegAlgorithmTests.LPLegType" },
                      { name: "tblLEGAssets.genOutletType"},
                      { name: "tblLegAlgorithmTests.lpSampleNo"}
            ],
            formOptions: {
               inline: {
                  onBlur: 'submit'
               }
            }
         } );
         
         var table = $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: "../server_side/scripts/ET_LEGresultsForProjectID.php?jobRef=<?=$jobRef?>",
            iDisplayLength: 25,
            responsive: true,
            columns: [
               { data: "tblLEGAssets.assetID",  width:"10%"},
               { data: null, render: function ( data, type, row ) {  
//                      return data.tblLEGAssets.theAssetOutletType + ': ' + data.tblLEGAssets.osTypeOfSystem + ', ' + data.tblLEGAssets.genOutletType;
                  return [data.tblLEGAssets.theAssetOutletType, data.tblLEGAssets.osTypeOfSystem, data.tblLEGAssets.genOutletType].filter(Boolean).join(': ');
               }, width:"30%" },
               { data: "tblLegAlgorithmTests.lpSampleNo", className: "editable",  width:"10%"},
               { data: "tblLegAlgorithmTests.LPResults", className: "editable", width:"10%" } ,
               { data: "tblLegAlgorithmTests.LPCFULevel", className: "editable", width:"10%" },
               { data: "tblLegAlgorithmTests.LPLegType", className: "editable", width:"30%" } 

            ],
            columnDefs: [
               { orderable: true, className: 'reorder', targets: [0, 1, 2, 3] },
               { orderable: false, targets: '_all' }
            ],       
            order: [ 1, 'asc' ],
            keys: {
               columns: ':not(:first-child)',
               keys: [ 7 ]
            },
            select: {
               style:    'os',
               selector: 'td:first-child'
            },
            buttons: [

            ]
         } ); 

         $('#example').on( 'click', 'tbody td.editable', function (e) {
              editor.inline( this );
          } );
         
         $('#LEGresultsModal').on('shown.bs.modal', function () {
            var table = $('#example').DataTable();
            table.draw() ;
            table.columns.adjust();

         });                  
         
      } );

Thanks in advance of any help you can give.

Hi there

We just found the columns.defaultContent property helps to reduce the width of the responsive control column nicely when set to string.empty.
Upon testing in Chrome/Edge/Firefox the column width is reduced and in the centre of the table.
In IE11, the width is reduced but the plus sign is at the top of the cell - see attached screenshot.

Are you experiencing this behaviour as well?

thanks
Az

You'll see here:
http://live.datatables.net/yeqazuze/22

I'm filtering the ServiceID. My example, I'm searching just 2 values (could be more or less). In my mind I should only get lines that have both of those values, but that's not the case. You can test with this by searching "03100500 03010200". You'll see that it shows 6 rows and not 7.

Is there a way to change that? I have another column that will be the same. I'm thinking it doesn't like the "|" delimiter.

Thanks for the help

Is it possible to add a where-clause to https://editor.datatables.net/examples/advanced/joinArray.html such that only users with a particular permission (e.g., 'Printer') are shown?

If so, could you post a snippet of the server-side Editor code with that clause added?

I have my project in this way : https://jsfiddle.net/Eufragio/u342qgoz/1/

My problem is when exporting to excel, that the results bring me this way:

The result that I hope is this:

I am trying to get an initial search to happen using server-side processing when my table is first loaded. I have set up the search option with my initial term, and it appears in the search box when the page is loaded.

However, the call to my server-side ajax routine does not include the search term.

How can I make that happen?

Here's my initialization code:

    $('##recipients').DataTable({
        processing: true,
        responsive: true,
        scrollX: true,
        serverSide: true,
        ajax: { url : /ajax/info.cfm",
                type : "POST"},
        },
        search: {
              "search": "Fred"
        }
    });

There appears to be an issue with scrollCollapse enabled that causes the number of rows to be loaded initially to be less than expected.

This appears to be a similar issue to the one described here: https://datatables.net/forums/discussion/31165/problem-with-initial-display-when-using-scroller-with-serverside-scrollcollapse

The following is a test case that reproduces the issue using the nightly builds: http://live.datatables.net/qopijexe/1

This appears to happen in both Firefox and IE11. For Chrome, this issue only occurs if the viewport is sufficiently small. About half the width of the table should work.

This has been tested on Chrome, Firefox, and IE11 in both CentOS 7 and Windows 7.

Let say I have this
"order": [[ 10, "asc" ],[ 0, "asc" ], [ 6, "asc" ], [ 7, "asc" ],[ 8, "desc" ]],

and I'd like to have a button that reset only that

let say to this
"order": [ ],

I need this mostly because I have a lot of column that are hidden by responsive
so if a column have an ASC order and is hidden by responsive toggle there is no easy way to reset it.
the only solution is to hide previous column, now the column is visible and we can see that is ordered or not.

So i'd like to offer a quick way for the user to reset the all, or if possible per column that can be another solution.

Thanks

So I've noticed that you can enter in html code for the text field in an editor and it just accepts it as html code. Example I use <strong>words<strong> and it displays as words. Is there anyway to sanitize the input before it gets sent to the database?

I have a table that is loading data with an ajax call, I am using dataSrc to manipulate the data before rendering it.

var opportunitiesTable = $('#opportunityList').DataTable({
  initComplete: function( settings, json ) {
    // Table loaded! Show what is in column 3
    console.log(this.api().column(3).data());
  },
  ajax: {
    url: "/ajax/opportunity/GetOpportunitiesByNetwork",
    dataSrc: function(res) {
      //console.log(res);
      if (typeof (res) === "object" && res.ResponseCode === 200) {
        opportunityData = res.Data;

        return opportunityData;
      } else {
        // Else show API error message
      }
    }
  }
});

What gets console logged

["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", …]

Table renders correctly though...

why not work ? belowe my code

var detailsTableOpt = $('#tablePianodicaricoDetail' + rowData.CdGiro).dataTable({
'dom': 'Bfrtip',
//'data': [],
'serverSide': true,
'processing': true,
'ajax': {
type: "POST",
data: { "StringSearch": _data },
url: _url,
//contentType: "application/json; charset=utf-8",
dataType: "jsonp",
dataFilter: function (inData) {
// what is being sent back from the server (if no error)
console.log(inData);
return inData;
},
error: function (err, status) {
// what error is seen(it could be either server side or client side.
console.log('Err:' + err);
},
dataSrc: function (result) {
console.log(result);
var parseJson = $.parseJSON(result.Data);
var json = {}
json.draw = 1;
json.recordsTotal = parseJson.length;
json.recordsFiltered = parseJson.length;
json.data = result.Data;

                        return parseJson;
                    }
                },
                'scrollY': '50vh',
                'scrollCollapse': true,
                'searching': false,
                'info': false,
                'paging': false,
                'language': {"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"},
                'destroy': true,
                'order': [],
                'buttons': [
                    //{
                    //    text: '<i class="fa fa-print" aria-hidden="true"></i>',
                    //    titleAttr: 'Stampa',
                    //    action: function (e, dt, node, config) {
                    //        return printDetails(e, dt, node, config);
                    //    }
                    //},
                    {
                        extend: 'copyHtml5',
                        text: '<i class="fa fa-files-o"></i>',
                        titleAttr: 'Copia',
                    },
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fa fa-file-excel-o"></i>',
                        titleAttr: 'Excel',
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fa fa-file-pdf-o"></i>',
                        titleAttr: 'PDF',
                    }
                ],
                'columns': [
                    { data: "CdGiro", title: "CdGiro", className: "dt-left", visible: false, orderable: false },
                    { data: "DsGiro", title: "DsGiro", className: "dt-left", visible: false, orderable: false },
                    { data: "CdVettore", title: "CdVettore", className: "dt-left", visible: false, orderable: false },
                    { data: "DsVettore", title: "DsVettore", className: "dt-left", visible: false, orderable: false },
                    { data: "DtConsegna", title: "DtConsegna", className: "dt-left", visible: false, orderable: false },
                    { data: "DtSped", title: "DtSped", className: "dt-left", visible: false, orderable: false },
                    { data: "NrSped", title: "NrSped", className: "dt-center", visible: false, orderable: false },
                    { data: "Sequenza", title: "Seq.", className: "dt-center", visible: true, orderable: true },
                    { data: "CdCli", title: "Cliente", className: "dt-center", visible: true, orderable: false },
                    { data: "RagioneSociale", title: "Ragione Sociale", className: "dt-left", visible: true, orderable: false },
                    { data: "Indirizzo", title: "Indirizzo", className: "dt-left", visible: false, orderable: false },
                    { data: "Localita", title: "Localita", className: "dt-left", visible: false, orderable: false },
                    { data: "Provincia", title: "Provincia", className: "dt-left", visible: false, orderable: false },
                    { data: "GV", title: "GV", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "OF", title: "OF", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "SG", title: "SG", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "PF", title: "PF", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "CR", title: "CR", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "SL", title: "SL", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "TotaleKg", title: "Tot. KG.", className: "dt-right", visible: true, orderable: false },
                    { data: "Im", title: "Importo", className: "dt-right", visible: true, orderable: false },
                ],
            });

Hello,

I am using rails and this ajax-datatables-rails gem in the back end.

I am having difficulty with dealing with columns that are not stored in the database. I realize this has as much to do with the gem as it does with datatables but I was hoping someone could give me some thoughts on what the best way to deal with is. Specifically, the present challenge is sorting by the calculated field.

I have a Price model with cost , size attributes and a #cost_per_unit method (cost/size). I want to display and sort cost_per_unit in datatables and I want to sort by cost_per_unit. Does anyone have some ideas on what the best way to deal with this is?

Is there a way to make the last line of the results of the HTML5 CSV button also have a CRLF after it? For example, if you go to the HTML5 Exports example page at https://datatables.net/extensions/buttons/examples/html5/simple.html and click on the CSV button and save the file and then open it in something like Notepad++, all the lines have a CRLF after them except for the last line. The reason I ask is I have customers who use the CSV button to export a file and then upload that file to a 3rd party vendor. The 3rd party vendor system ignores the last line because there's no CRLF after it like all the other lines.

Thanks,
Matt

So, to prevent scripts from being executed when showing them in a data table, I usually do this:

var sanitized = $("div").text("<script>alert(1);</script>").html();

This works fine when rendering a table. However when re-rendering that table, DataTables won't initialize. See example:

$("#mytable").DataTable({
  columns: [{
    title: "Column"
  } ],
  data: [
    [`<a href="#">${$("div").text("<script>alert(1)</script>").html()}</a>`]
  ],
  destroy: true
});

$("#mytable").DataTable({
  columns: [{
    title: "Column"
  } ],
  data: [
    [`<a href="#">something else</a>`]
  ],
  destroy: true
});

No errors will show up in the chrome console. I think this is a bug! If you do not use the sanitizing, DataTables will initialize twice and show the expected result.

Using version 1.10.19. Tried with plain numbers as well.
Rows are sorted ok except the ones with values beyond 999.999,00

var dtnc = $("#dt-propiedades-listar").DataTable(
// Opciones
{
"ajax": '/path/',
"processing": true,
"paging": true,
"deferRender": true,
"columns": [
{"data": "select"},
{"data": "imagenes"},
{"data": "referencia"},
{"data": "propiedad_provincia"},
{"data": "propiedad_localidad"},
{"data": "propiedad_subtipo"},
{"data": "habitaciones_totales"},
{"data": "banios_totales"},
{"data": "metros_totales"},
{"data": "venta_precio"},
{"data": "alquiler_precio"},
{"data": "temporada_precio"},
{"data": "traspaso_precio"},
{"data": "modificado"},
{"data": "visible"},
{"data": "disponible"},
{"data": "compartido"},
{"data": "links"}
],
"select": {
style: 'multi',
selector: 'td:first-child input',
blurable: false,
className: 'selected'
},
"stateSave": true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
"columnDefs": [
{
"targets": 0,
"searchable": false,
"sortable": false

            },
            {
                "targets": 1,
                "searchable": false,
                "sortable": false

            },
            {
                "targets": 6,
                "className": "text-right"
            },
            {
                "targets": 7,
                "className": "text-right"
            },
            {
                "targets": 8,
                "className": "text-right"
            },
            {
                "targets": 9,
                "className": "text-right",
                "type": "num-fmt"
            },
            {
                "targets": 10,
                "className": "text-right",
                "type": "num-fmt"
            },
            {
                "targets": 11,
                "className": "text-right",
                "type": "num-fmt"
            },
            {
                "targets": 12,
                "className": "text-right",
                "type": "num-fmt"
            },
            {
                "targets": -1,
                "searchable": false,
                "sortable": false
            },
            {
                "targets": -2,
                "className": "text-right"
            },
            {
                "targets": -3,
                "searchable": false,
                "className": "text-right"
            },
            {
                "targets": -4,
                "searchable": false,
                "className": "text-right"
            },
            {
                "targets": -5,
                "searchable": false,
                "className": "text-right"
            }],
        "order": [[2, "desc"]],
        "rowCallback": function (row, data) {
            // Set the checked state of the checkbox in the table
            $('input.selectRow', row).prop('checked', data.active == 1);
        },
        "initComplete": function () {
            load_quick_view();
        }
    }

Using https://datatables.net/download/index I picked responsive which automatically hides columns as screen size changes using this code:

 ` <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/r-2.2.2/datatables.min.css"/>`

This worked as I moved the screen smaller on my computer; however, did not hide columns or give the cool setup with the circle buttons on a smart phone. Project link is here: https://databasetable-net.000webhostapp.com/

Is there an easy way to get the Responsive plug in to work on smart phones?

=========================================================

Also, less importantly, I noticed using <th class=hidden-xsor @media (max-width: 700px) {.hideClass{display:none;}} seems to only work for client-side and not server side.

The <th> header would hide but the data would still show up. Can I confirm if this is true?

Thanks.

on Clicking first time ,sorting not working in datatable ?..... its work on second click!