Hello,
im currently working a project dealing large set of data around 1 million using datatables, im using PHP mysql for query and oracle 12c database. every time i run the program. data loads very slow. when i limit the data row to 50k only the load lessen. what i want is to load all the data faster and be paginated. but when the row go up 100k it load like hell. sorry for bad English..

for reference:
this is my table:
<table id="myTable" class="display table table-bordered">
<thead> <tr> <th>Account No</th> <th>Consumer Name</th> <th>ADDRESS</th> <th>Amount</th> </tr> </thead>

<tbody id="data" > <?php include("fetch2.php"); ?> </tbody>
</table>

fetch2.php:
<?php $statement = oci_parse($conn, "SELECT * FROM ethanhost.FDISCO ORDER BY CNAME ASC OFFSET 0 ROWS FETCH NEXT 500000 ROWS ONLY"); //<= this where i limit the rows oci_set_prefetch($statement, 50); oci_execute($statement); while($row = oci_fetch_array($statement)) { echo "<tr>"; echo "".$row['ACNT_CODE'].""; echo "".$row['CNAME'].""; echo "".$row['CADDRESS'].""; echo "".$row['AMOUNT'].""; echo ""; } oci_free_statement($statement); ?>

and my script for datatable:

$(document).ready( function () {
    $('#myTable').DataTable({
        });
} );

this code is perfectly fine with 50k rows below. but when i tried to load all the rows on our database it crash my browser and loads freaking bad and slow.
hope you can HELP me. THANKS!

Please forgive the odd title on this one - it's an odd requirement all around.

So, I've got someone with a bunch of numerical identifiers that represent various organisational units. They're hierarchical, like so (only the numbers are used, the names are just for your information):

387 - Parent Division 1
3871 - Sub Division
38711 - Area 1
387111 - A1 Team 1
387112 - A1 Team 2
38712 - Area 2
387121 - A2 Team 1
456 - Parent Division 2
4561 - Sub Division
45611 - Area 2
...

And so on. Some of the numbers go quite deep, 7 or 8 long. Not how I would have set up the identifiers, but that was decided long before I came on the scene, and they aren't going to change now.

Obviously, DataTables' inbuilt sorting displays the units out of order. All the Parent Divisions first, then all the sub divisions, then areas etc. Equally obviously, this isn't what the users want. Alternatives like padding the identifiers with 0s have been rejected. They must be in order, and they must display exactly as is. I could probably cobble together some kind of monstorous CTE that gives me a giant sort string, but as soon as they order on another column, that initial order is gone and can't be retrieved. Cue much wailing and gnashing of teeth.

Is there a simple (or even not-simple) way to order a bunch of numbers like I've laid out above so that it can be done on load, and renewed when the user clicks the Unit Code column after sorting on something else? It's kind of hard to describe the actual sorting process that has to happen - hopefully the example is clear enough.

Its working fine on desktop however if I check on mobile device or try to inspect using responsive screen, scrollX divides in three different scrolls, head, body, and footer and all three scrolls work individually whereas they should work as one

I am using datatable since my first time developing web application. But I have just some issue in my project this past week and I can't figure it out until now. I've generated my table in server side and I was able to get the data from my DB and it works perfect but when click the pagination button it turns out my pagination button not working properly. I don't know what did I missed. Here is my client side and server side code. Your help will be very much appreciated. Sorry with my english btw.

Client Side...

  $('#tbl-employees-server-side').DataTable( {
      "dom" : "Bfrtip",
      "pagingType": "full_numbers",
      "responsive": true,
      "processing": true,
      "serverSide": true,
      "ajax": {
        "url" : "controller/crud_manager.php",
        "type": "POST",
        "data": {"action":"server_side"}
      },      
      "buttons": [
      {
          "extend" : 'excelHtml5',
          "exportOptions" : {
              "columns" : ':visible'
          }
      },
      {
          "extend" : 'pdfHtml5',
          "exportOptions" : {
              "columns" : ':visible'
          }
      },
      {
          "extend" : 'print',
          "exportOptions" : {
              "columns" : [ 0,1,2,3,4 ]
          }
      },
      "colvis"
    ]
  } );

Server Side

  $sql = "";
  $sql .= "SELECT * FROM master_list ";
  $count = "SELECT count(*) FROM master_list ";
  $column= array(
        0 => 'emp_num',
        1 => 'name',
        2 => 'hire_date',
        3 => 'emp_status',
        4 => 'position',
        5 => 'emp_num',
    ); //create column like table in database

  if(isset($_POST['search']['value'])){

    $sql .= 'WHERE emp_num LIKE "%'.$_POST['search']['value'].'%" ';
    $count .= 'WHERE emp_num LIKE "%'.$_POST['search']['value'].'%" ';
    $sql .= ' OR name LIKE "%'.$_POST['search']['value'].'%" ';
    $count .= ' OR name LIKE "%'.$_POST['search']['value'].'%" ';
    $sql .= ' OR emp_status LIKE "%'.$_POST['search']['value'].'%" ';
    $count .= ' OR emp_status LIKE "%'.$_POST['search']['value'].'%" ';
    $sql .= ' OR position LIKE "%'.$_POST['search']['value'].'%" ';
    $count .= ' OR position LIKE "%'.$_POST['search']['value'].'%" ';

  }

  if (isset($_POST['order'])) {
    if ($column[$_POST['order']['0']['column']] != 5) {
        $sql .= ' ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
        $count .= ' ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
    }
  }else{
    $sql .= ' ORDER BY name ASC ';
    $count .= ' ORDER BY name ASC ';
  }

  if ($_POST['length'] !=-1) {
    $sql .= 'LIMIT '.$_POST['start'].','.$_POST['length'];
    $count .= 'LIMIT '.$_POST['start'].','.$_POST['length'];
  }

  $data = $this->connection->query($sql)->fetchAll(PDO::FETCH_ASSOC);

  $filtered_rows = $this->connection->query($count)->fetchColumn();

  $getData = array();
  foreach ($data as $value) {
    $subArray   = array();
    $subArray[] = $value['emp_num'];
    $subArray[] = $value['name'];
    $subArray[] = date('M. d, Y',strtotime($value['hire_date']));
    $subArray[] = $value['emp_status'];
    $subArray[] = $value['position'];
    $subArray[] = "<button class='btn btn-xs btn-success btn-view-record' data-emp_num=".$value['emp_num'].">
                <i class='fa fa-eye'></i></button>
            <button class='btn btn-xs btn-warning btn-edit-record' data-emp_num=".$value['emp_num'].">
                <i class='fa fa-edit'></i></button>
            <button class='btn btn-xs btn-danger btn-delete-record' data-emp_num=".$value['emp_num'].">
                <i class='fa fa-trash'></i></button>";

    $getData[] = $subArray;

  }

  $total_row = $this->connection->query("SELECT count(*) FROM master_list")->fetchColumn();

  $result = array(
    'draw'              =>  intval($_POST['draw']),
    'recordsTotal'      =>  $total_row,
    'recordsFiltered'   =>  $filtered_rows,
    'data'              =>  $getData
  );
  return $result;

Hi

I have put a select dropdown outside my table which filters the region column. This works fine; the problem is that only the amount of values in the pagelength variable are populated. Say I have 50 regions, but on page load the pagelength is set to 20, then only a few regions will populate in the dropdown, and when the length is changed to 100, the amount of regions dont increase with it.

`initComplete: function () {
    this.api().columns('.select-filter').every( function () {
            var column = this;

            var select = $('<select class="form-control"><option value=""></option></select>')
               .appendTo( $('.col-sm-6:eq(1)', table.table().container()))  // 
.appendTo($(column.header()))
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } ); `

I need to have all the regions populated in the dropdown irrespective of the pagelength variable. Please note I am using server side processing.

Thanks!

Hey,

do you have any plans on creating Datatables theme based on Bulma CSS framework?
Foundation is supported officialy and is less popular than Bulma (27k vs 30k Github stars) so I think that Bulma does deserve some attention.

Also there are several unofficial packages but one with over 300 downloads per week.

Appreciate your answer and consideration.

Have a nice day!

hello,
sorry for asking help again but im having hard time to fix this one.
it says headerCells[i] is undefined
i look everywhere but i cant finsd a way to fix it. im just new using datatable

code:

$(document).ready(function() {
``$('#dragon').DataTable( {
"aoColumns": [
{ "mData": "ACNT_CODE", "bSortable": true ,"bSearchable": true},
{ "mData": "CNAME", "bSortable": true , "bSearchable": true},
{ "mData": "CADDRESS", "bSortable": true , "bSearchable" : true},
{ "mData": "TABLEID", "bSortable": true , "bSearchable": true },
{},
{}
],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource":"serverside.php",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback,
"error": function (e) {
console.log(e.message);
}
});
}
});
} );

and my serverside.php:
https://www.datafilehost.com/d/28f8ce54

Hello,

I'm using datatables with 2K records and it takes around 15s to draw the table. I load the data using XMLHttpRequest to load all the data at once (this doesn't take very long because it is only 2K records) and then I draw the table using HTML(this takes longer).Then I also do some rendering. I show the records on pages of 10 records each.

I do not want to do server side processing. I there anything that I can do on the client side to speed it up ?

Thank you.

It works fine on live.datatables but it does not workout in the development environment (too many fields are used), though i used numeral.js script
reference:

here is my code:
` "footerCallback": function ( row, data, start, end, display ) {
var api = this.api();

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\MB,KB,GB,TB,]/g, '')*1 :
                typeof i === 'number' ?
                numeral(i).value() : i;
        };

        // Total over all pages
        total = api
            .column( 3 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 3, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        total = numeral(total).format('0.0a');
        pageTotal = numeral(pageTotal).format('0.0a');
      $( api.column( 3 ).footer() ).html(
         '--'+pageTotal +' ( --'+ total +' total)'
        );
    }

`
Please let me know where did i go wrong?

Thanks
Koka

Sometimes my API will return back an error of no user being returned. {"error":"No found users | CODE: XXX-XXX"}
Data Tables is able to show the error message in a alert, however it doesn't update the table to say "No Data available in table" until it's updated in some way (Next page, changing sorting, ETC)

Is there something I can change to allow for it to reload the table correctly to show the "No data available in table" after/before the alert is confirmed.

What I want to be able to do is when the table is displayed, have one of the fields show as an empty text input. I don't want the user to have to click on it, it should just be editable by default like this:

I have tried to use a form field in the cell, but when the user changes a value and I try to update the data cache values programmatically on keyup (which I need to do to be able to access the value later) using:

$(element).on('keyup', function () {
        var cell = table.cell(element);
        cell.data($("input.withdrawal-amount-value", this).val());
});

DataTables overwrites the form field with the cell's value and clears out my form field. The alternative is to use the DataTables Editor plugin, but all of the examples I've found assume there needs to be some action done by the user (clicking on the row, clicking on an edit button, etc.) I just want a simple form field. Is there a way to do this in either DataTables or the Editor plugin? This seems like a really simple thing...

Hi,

we recently had an accessibilty test and there were 2 problem they mentioned with our datatables. Both issues had to do with elements being disabled only by styling:

1. When Pagination is active but there aren't enough entries that it becomes neccessary, the pagination buttons become disabled (https://datatables.net/examples/basic_init/zero_configuration.html set pag size to 100). But the problem is that this is only happening visually but that is not visible for the screenreader which causes problems for visually impared users.

2.The column visibility (https://datatables.net/extensions/buttons/examples/column_visibility/simple.html) also has the problem that when columns are deactivated the only thing that happens is that the 'active' css-class is being removed but beside that there is no hint if a column is active or not andthat also is a problem for screenreaders.

I would like to ask if there are solutions for this problem or if they will be addressed in the future.

Thanks and kind regards
Kevin

I have a dropdown that is populated depending on a part number:

            editor.dependent( 'salstkmaster.partnum', function ( val, data, callback ) {
                 
                $.ajax( {
                    url: 'datatables.php',
                    data: { action: "supplier", value: val },
                    type: 'POST',
                    dataType: 'json',
                    success: function ( json ) {
                        callback( json );
                    }
                });
            });

This uses the salstkitem.supplier field, and lets imagine it produces the following:

<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>

How can I get this field to update the enqitem.itemid field? Rather than salstkitem.supplier?

I have tried adding the following to my DataTable:

{ data: "salstkitem.supplier", editField: "enqitem.itemid" }

But this stops the dropdown from working. Any ideas?
If more information is required I can provide it, I just tried to cut stuff out for brevity.

Hi,

I am trying to update a row in a datatable.
The button in the row opens a bootstrap modal, loads content from the server.
The content is actualy a javascript code, which should update the row, simply running this:

table.row(rowId).data(data).invalidate();

rowId and data is OK.

I think there is something with the button. As I would like to update the row that contains it.

Any help is much appreciated.
Thanks,
Mark

I trying to get my head around the dependent method and setting a value for a select2-field. I have a field defined like this:

{
                    "label": "TPM",
                    "name": "TPM",
                    "type": "select2",
                    opts: {
                        //def: 'BR',
                        ajax: {
                            dataType: "json",
                            url: '/Registraties/getMethodes',
                            data: function (params) {
                                var query = {
                                    tyb: editor.val('TYB'),
                                }
                                return query; 
                            },
                            processResults: function (data) {
                                return {
                                    results: data
                                };
                            }
                        }
                    }
                }

This gets its data using an ajax call and passes the contents of the TYB-field to the request. Works fine.
Then I have a dependency defined like this:

        editor.dependent('TYB', function (val, data, callback) {
            $.ajax({
                
                url: '/Registraties/TypeBehandelingUpdated',
                type: 'post',
                dataType: 'json',
                data: { 
                    "TYB": val,
                    "PRODUCTID": data.values.PRODUCTID, 
                    "TPS": data.values.TPS, 
                },
                success: function (json) {
                    callback(json); // callback naar de editor zodat die de velden kan bijwerken
                }
            });

        });

So, when the TYB field is changed, I want to make some changes to the form. I do an ajax call, and on the serverside I decide which fields I need to enable or disable, and if I want to set a value for something. This returns something like the following:

{  
   "show":[  
      "TPM",
      "HPG",
   ],
   "hide":[  
      "BWL",
   ],
   "values":{  
      "TPM":"BR",
   },
   "labels":{  
      "HVH":"Hoeveelheid:"
   }
}

The problem here is the value for the TPM field. In the network-tab in the debugging console I see a call "http://localhost:53686/Registraties/getMethodes?initialValue=true&value=%22BR%22", and the result is: "{"id": "BR", "text": "BRANDEN" }". Looks good to me, but the TPM field stays empty.
Btw: when I try to set a default value for that field with the option " def: 'BR' ", then I see the same ajax call and then the field is set correctly.

I have a .Net background, and I try to get my head around all this jquery-magic, but this is too complicated for me. If anyone with some more experience would like to help me figure this out, that would be greatly appreciated! :-)

Hi Allan,

I just ran npm outdated and npm update on my project, which included minor version bumps for several datatables packages. Webpack is now failing to compile because it can't find the images referred to in the css. The /images path is missing from the /node_modules/datatables.net-dt/ directory.

Thanks,
-steve

Hi, I've implemented colReaorder on a table but I've noticed that, when dragging a column, the orderable function gets executed too.

For what I can see, in this example the rows aren't being orderd after a column drag. I've checked the events assigned to the th through the console and there are no custom events on it. The only difference is that on my table, all the events shown are duplicated compared to the events I see in the example page:

Example page:

My page:

How can I find out what is causing this behaviour difference?

Hi everyone!
I'm new user of Datatables, and i'm trying to get data by Ajax from a JSON (Web Service).

Here is a response from my WS:

{
"informacoes": {
"SP": {
"incomingCalls": 150,
"doubt": 0,
"incidents": 0,
"estado": "São Paulo"
},
"RJ": {
"incomingCalls": 6,
"doubt": 0,
"incidents": 0,
"estado": "Rio de Janeiro"
}
}

And this is my DT Function:

$('#tablesChart').DataTable({
"dom": "Bfrtip",
"buttons": ['excel', 'pdf'],
"processing": true,
"ajax": {
'url': '<?=base_url("/relatorios/auxiliar")?>',
'dataSrc': 'informacoes',
'dataType': 'json',
'error': function(response){
console.error(response.responseText);
}
},
"columns": [
{'data': '0.incomingCalls'},
{'data': '0.doubt'},
{'data': '0.incidents'},
{'data': '0.estado'}
]
});

But, when I load it in my browser, its returning: No data available in table

Gratitude to anyone who is willing to help.

Hi,

I cannot access the following page.

https://editor.datatables.net/docs/1.8.1/php/

Please help thanks.

My datatable show columns that are created dynamically and it works fine but I had to set the visibility and other options at front end page in columnDefs option. I want to pass all the things related to a column from the server side.

I have done this so far:

.ashx code

private void GetColumnNames(HttpRequest request, HttpResponse response)
{
    List<DatatableInboxColumnNames> columnNames = new List<DatatableInboxColumnNames>();
    columnNames.Add(new DatatableInboxColumnNames { data = "checkboxColumn", title = "" });
    columnNames.Add(new DatatableInboxColumnNames { data = "EmployeeId", title = "EmployeeId" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Name", title = "Name" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Title", title = "Title" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Joining", title = "Joining" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Viewed", title = "Viewed" });

    string output = new JavaScriptSerializer().Serialize(columnNames);
    response.Write(output);
}

The above code returns the column name which works fine.

The front end code:

                   columns: result,
                    columnDefs: [
                        {
                            targets: 0,
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<input type="checkbox" class="editor-active">';
                                }
                                return data;
                            },
                            className: "dt-body-center",
                            orderable: false,
                            searchable: false
                        },
                        {
                            targets: 1,
                            visible: false
                        },
                        {
                            targets: -1,
                            visible: false
                        }
                    ]

Now instead of hard coding it here in front end I want to send the columnDef parameters through server side.

this is what I have started with:

public class Column
{
public string data { get; set; }
public string name { get; set; }
public bool searchable { get; set; }
public bool orderable { get; set; }
public Search search { get; set; }
}

public class Search
{
public string value { get; set; }
public string regex { get; set; }
}

Can you please suggest me a JSON format which will set the columnDef parameters?