I am getting "Cannot read property 'style' of undefined " when I call draw() when "scrollx" is enabled. I am hoping someone can tell me what I am doing wrong...

Here is a fiddle that demonstrates the problem: http://jsfiddle.net/KSz3Z/. Press the "test" button to get the error

However, I get no error if I change this:

       $("#my-button").click(function () {
            $('.my-dt-class').each(function () {
                $(this).DataTable().draw();
            });
        });

to this:

$("#my-button").click(function () {
        $("#my-dt-id").DataTable().draw();
});

Here is a fiddle for the successful case: http://jsfiddle.net/tt93e/

This code is scaled-down just to show the problem. In my real code, I have a variable number of different types of tables on the page. I want to be able redraw a particular type of table based on user input, so I would really like to be able to use the class name selector. I also want to keep the scollx enabled. Any idea what I am doing wrong?

I'm trying to use ColReorder on a table with a number of columns that require the data-order attribute for sorting. However, it seems like when you reorder the columns, the "sorting" algorithms uses the original column's sort on the new column, effectively implying that the sorting does not reorder. This also leads to cases where alerts are thrown because not all the columns use data-* sorting/filtering. This is a simplified example of what I'm working with: http://jsfiddle.net/vLyqr/1/ Not sure if I need to do something more or if this is a bug.

Hey,

I'm using DataTables 1.9.4 with few plugins (ColVis, ColReorderWithResize and ColumnFiltering). The parameters I'm using for server-side communication are:

• "bServerSide"
• "fnServerData"
• "sAjaxSource"

Now, let's say I have to display 3000 rows with around 25 columns without pagination ("iDisplayLength": -1). The json containing the data weights around 1MB and it takes around second for server to send it to datatables.

The problem is the rendering of those 3000 rows take few seconds (around 5-10, which is unacceptable). On IE, it can take quite more, resulting in "Script doesn't respond" errors.

I wish I could speed this process up somehow - i.e. by showing lets say 100 rows and rendering the rest in background. Is there a better way?

Best, Marcin

I would like to add a file header for datatables while printing.Plz anyone help....

In my page 5 data tables are there and each table loads more than 2000 records, so i need so much time to load those records. so any alternative solution is for load the records in less time.

Thanks, HariKrishna

Hi

i have following code on success of server side data but its end up with two header and i cannot do sorting on any of header.

success: function (json) {
oIndividualCache.lastJson = jQuery.extend(true, {}, json);

                    if (oIndividualCache.iCacheLower != oIndividualCache.iDisplayStart) {
                        json.aaData.splice(0, oIndividualCache.iDisplayStart - oIndividualCache.iCacheLower);
                    }
                    json.aaData.splice(oIndividualCache.iDisplayLength, json.aaData.length);
                    fnCallback(json);
}

what can Ido to make the table's head and the body be in line?

example:

$(document).ready(function() {
                $('#example').dataTable( {
                    "aaData": [[1,"20140709","123",1432.0,123.0,13353.0,"1122.00","1324.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00","1111.00","1122.00","1324.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00","1111.00","1122.00","1324.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00","1111.00","1122.00","1324.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00"],[2,"20140709","456",1432.0,123.0,18255.25,"1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","180.00","234.00","1111.00","1122.00","1324.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00","1111.00","1122.00","1324.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00"],[3,"20140709","789",2222222.0,123.0,576571.75,"2222.00","2222.00","2222.00","2222.00","2222.00","2222.00","2222.00","2222.00","2222.00","2222.00","2222.00","2222222.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","1111.00","1122.00","180.00","234.00","1111.00","1122.00","1324.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00","1111.00","1122.00","1324.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00","1342.00","1423.00","1432.00","130.00","145.00","222.00","1111.00","234.00","234.00","345.00","456.00","123.00","124.00","145.00","179.00","180.00","234.00"]],
                    "sScrollX": "100%",
                    "sScrollXInner": "130%",
                    "bScrollCollapse": true
                } );
            } );

Page's table code:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr class="form_tr_first">
                            
                            
                                <th>Number</th>
                            
                                <th>Date</th>
                            
                                <th>column1</th>
                            
                                <th>column2</th>
                            
                                <th>column3</th>
                            
                                <th>column4</th>
                            
                                <th>00:15</th>
                            
                                <th>00:30</th>
                            
                                <th>00:45</th>
                            
                                <th>01:00</th>
                            
                                <th>01:15</th>
                            
                                <th>01:30</th>
                            
                                <th>01:45</th>
                            
                                <th>02:00</th>
                            
                                <th>02:15</th>
                            
                                <th>02:30</th>
                            
                                <th>02:45</th>
                            
                                <th>03:00</th>
                            
                                <th>03:15</th>
                            
                                <th>03:30</th>
                            
                                <th>03:45</th>
                            
                                <th>04:00</th>
                            
                                <th>04:15</th>
                            
                                <th>04:30</th>
                            
                                <th>04:45</th>
                            
                                <th>05:00</th>
                            
                                <th>05:15</th>
                            
                                <th>05:30</th>
                            
                                <th>05:45</th>
                            
                                <th>06:00</th>
                            
                                <th>06:15</th>
                            
                                <th>06:30</th>
                            
                                <th>06:45</th>
                            
                                <th>07:00</th>
                            
                                <th>07:15</th>
                            
                                <th>07:30</th>
                            
                                <th>07:45</th>
                            
                                <th>08:00</th>
                            
                                <th>08:15</th>
                            
                                <th>08:30</th>
                            
                                <th>08:45</th>
                            
                                <th>09:00</th>
                            
                                <th>09:15</th>
                            
                                <th>09:30</th>
                            
                                <th>09:45</th>
                            
                                <th>10:00</th>
                            
                                <th>10:15</th>
                            
                                <th>10:30</th>
                            
                                <th>10:45</th>
                            
                                <th>11:00</th>
                            
                                <th>11:15</th>
                            
                                <th>11:30</th>
                            
                                <th>11:45</th>
                            
                                <th>12:00</th>
                            
                                <th>12:15</th>
                            
                                <th>12:30</th>
                            
                                <th>12:45</th>
                            
                                <th>13:00</th>
                            
                                <th>13:15</th>
                            
                                <th>13:30</th>
                            
                                <th>13:45</th>
                            
                                <th>14:00</th>
                            
                                <th>14:15</th>
                            
                                <th>14:30</th>
                            
                                <th>14:45</th>
                            
                                <th>15:00</th>
                            
                                <th>15:15</th>
                            
                                <th>15:30</th>
                            
                                <th>15:45</th>
                            
                                <th>16:00</th>
                            
                                <th>16:15</th>
                            
                                <th>16:30</th>
                            
                                <th>16:45</th>
                            
                                <th>17:00</th>
                            
                                <th>17:15</th>
                            
                                <th>17:30</th>
                            
                                <th>17:45</th>
                            
                                <th>18:00</th>
                            
                                <th>18:15</th>
                            
                                <th>18:30</th>
                            
                                <th>18:45</th>
                            
                                <th>19:00</th>
                            
                                <th>19:15</th>
                            
                                <th>19:30</th>
                            
                                <th>19:45</th>
                            
                                <th>20:00</th>
                            
                                <th>20:15</th>
                            
                                <th>20:30</th>
                            
                                <th>20:45</th>
                            
                                <th>21:00</th>
                            
                                <th>21:15</th>
                            
                                <th>21:30</th>
                            
                                <th>21:45</th>
                            
                                <th>22:00</th>
                            
                                <th>22:15</th>
                            
                                <th>22:30</th>
                            
                                <th>22:45</th>
                            
                                <th>23:00</th>
                            
                                <th>23:15</th>
                            
                                <th>23:30</th>
                            
                                <th>23:45</th>
                            
                                <th>24:00</th>
                            
                        </tr>
    </thead>
    
    <tbody>
        
    </tbody>
</table>

Hello.

I make a table like http://live.datatables.net/bazilay/1.

There are <select> in table. In this case how can I get all data in table? I want to send table data using ajax to another page.

I am using latest version of datatable.

I am thinking about..

$("#table").row().each(function() {
 data[] = [$(this).children("td:first-child").val(), $(this).children("td:nth-child(2)").val(), $(this).children("td:last-child").text()];
});

Thank you in advance.

ColReorder 1.1.2 has it's own $.fn.dataTable.ColReorder.defaults but it is ignored when initialized using "dom".

I have set reorderCallback function in defaults, but it is ignored.

Allan, with the jQuery UI CSS file you are overriding any theme settings sometimes - is this intended?

Example: .DTTT_button { position: relative; float: left; margin-right: 3px; padding: 3px 10px; border: 1px solid #d0d0d0; background-color: #fff; color: #333 !important; cursor: pointer; }

The "color: #333 !important" overrides all theme text coloring (my custom created jQuery UI Theme button text coloring is white)

Hi, how would I get the cell data source from createdCell callback ?

http://datatables.net/reference/option/columns.createdCell

cellData parameter is the actual text returned by render function, not the cell data source

The row contains the cell data source, but how do I access it ? My row is an object with keys for columns, can I use the column index to access it somehow ?

Hello everybody, I am new to datatables and I'm struggling to get the Editor plugin to work with my MySQL Table. I just changed the Parameters of the inline-editing example with tab control (Config, PHP-File, ans JS ), and everything looks correct, but I'm getting this Error: <<DataTables warning: table id=generalexpenses - SQLSTATE[42S22]: Column not found: 1054 Unknown column 'id' in 'field list'>> I changed the "examples" table in the JS with my "generalexpenses" table and I don't have an 'id' field (neither in JS nor in PHP script). I don't know how to find this field list. Can somebody tell me where can I find it?

I think that reorderCallback should have "settings" parameter like initComplete and other events.

Hi,

after I updated to DataTables 1.10 from 1.9.1 the X-symbol in the Filter field is missing. The Filtering works fine but theres no possibility to reset the Filter.

In 1.9.1 i used a trashbox that i combined with the input field. In 1.10 this is not nessessary any more because of the implemented "X" . But its not there :-)

Kind regards

Thomas Engels

i have 27000 records but datatable present only 100 records. i am using codeigniter library.my code is. $(document).ready(function() { var table = $('#example').DataTable( { "processing": true, //"serverSide": true, "ajax": "<?php echo base_url(); ?>user_record", "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], "columns": [ { "class": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "adata": 0 }, { "adata": 1 }, { "adata": 2 }, { "adata": 3 }, { "adata": 4 }

    ],

    "bJQueryUI": true,
    "oLanguage": {
    "sProcessing": "<img src='<?php echo base_url(); ?>media/images/ajax-loader.gif'>"  
    }, 
    "order": [[1, 'desc']],
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            //$(nRow).css('background', '#E2E4FF')
            //$('td:eq(0)', nRow).css('background', '#E2E4FF')
        //$('td:eq(0)', nRow).html(''+(iDisplayIndex+1)+'')
        //if(iDisplayIndex%2==0)
        //{
        //$colour="RED";
        //}
        //else
        //{
        //$colour="#FFFFFF";
        //}
    switch(aData[5]){
            case '1':
            //$(nRow).css('background', $colour)
            //$('td:eq(0)', nRow).css('background', $colour)
            $('td:eq(5)', nRow).html('<a href="<?php echo base_url()?>home/status/'+aData[0]+'" title="Edit"><i class="fam-user-edit"></i></a> | <a href="<?php echo base_url()?>ring_adminback/home/status/'+aData[0]+'" title="Block"><i class="fam-user-green"></i></a>')
            //$('td', nRow).css('color','GREEN')
            break;

            case '0':
            //$(nRow).css('background', $colour)
            //$('td:eq(0)', nRow).css('background', $colour)
            $('td:eq(5)', nRow).html('<a href="<?php echo base_url()?>home/status/'+aData[0]+'" title="Edit"><i class="fam-user-edit"></i></a> | <a href="<?php echo base_url()?>ring_adminback/home/status/'+aData[0]+'" title="Block"><i class="fam-user-green"></i></a>')
            //$('td', nRow).css('color','GREEN')
            break;

            case '2':
            //$(nRow).css('background', '#FFC4D3')Delete
            //$('td:eq(0)', nRow).css('background', '#FFC4D3')
            $('td:eq(7)', nRow).html('<a href="<?php echo base_url()?>admin_back/update_user_login/'+aData[0]+'" title="Edit"><i class="fam-user-edit"></i></a> | <a href="<?php echo base_url()?>ring_adminback/home/status/'+aData[0]+'" title="Enable"><i class="fam-user-delete"></i></a>')
            //$('td', nRow).css('color','Red')
            break;

            case '3':
            //$(nRow).css('background', '#FFC4D3')Delete
            //$('td:eq(0)', nRow).css('background', '#FFC4D3')
            $('td:eq(7)', nRow).html('<a href="<?php echo base_url()?>admin_back/update_user_login/'+aData[0]+'" title="Edit"><i class="fam-user-edit"></i></a> | <a href="<?php echo base_url()?>ring_adminback/home/status/'+aData[0]+'" title="Enable"><i class="fam-user-delete"></i></a>')
            //$('td', nRow).css('color','Red')
            break;

    }           
    }
} );

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

} );

Hi,

I am trying to get the serverside processing work on with datatables. I am using node on the server side and it responds back the data to datatables. But, I am getting stuck on Processing on the table.

Here is the datatable function: $(document).ready(function() { $('#system_log_table').dataTable( { "processing": true, "serverSide": true, "ajax": { "url": "/advanced/get_system_logs", }, "stateSave": true, "autoWidth": true, "searching": true, "destroy": true, "info": false, "lengthChange": true, "paging": true, "pagingType": 'full_numbers' }); });

This is an example response which I get on ajax: {"draw":1,"recordsTotal":10,"recordsFiltered":10,"data":[["Jun 27 04:09:45","notice","syslog-ng startup succeeded"],["Jun 27 04:10:01","info","(root) CMD (/home/balancer/code/firmware/current/bin/process_schedule.pl > /dev/null 2>& 1)"],["Jun 27 04:10:01","info","(root) CMD (/home/product/code/firmware/current/bin/update_log_count > /dev/null 2>&1)"],["Jun 27 04:10:01","info","(root) CMD (/home/balancer/code/firmware/current/bin/system_snapshot > /dev/null 2>& 1)"],["Jun 27 04:10:01","info","(root) CMD (/home/balancer/code/firmware/current/bin/watchdog.pl > /dev/null 2>& 1)"],["Jun 27 04:10:01","info","(root) CMD (/home/product/code/firmware/current/bin/virusdef_updates.pl Hourly > /dev/null 2>& 1)"],["Jun 27 04:10:01","info","(root) CMD (/home/product/code/firmware/current/sbin/ntp-sync.pl > /dev/null 2>& 1)"],["Jun 27 04:10:02","info","Restart command syslog' - FAILED"],["Jun 27 04:10:02","info","Check module /home/product/code/firmware/current/etc/watchdog.d/09syslog.pm FAILED"],["Jun 27 04:10:02","info","Check command /home/product/code/firmware/current/etc/watchdog.d/10mysql' - OK"]]}

The HTML is as below: <table id="system_log_table" class="server_table sortable_table"> <thead> <tr> <th> Timestamp </th> <th> Severity Level </th> <th> Message </th> </tr> </thead> </table> It is pretty basic but I am not able to get debug as I am not getting any error in Chrome dev tools. Can you help me with this.

Thanks Krishna

The code provided is taken from version of datatables /*! DataTables 1.10.1-dev, line 1443 inside function _fnInvalidateRow

The problem occured while calling datatable.fnUpdate(myString, row, columnIndex).

Correct condition should be: while ( cell.childNodes.length )... After correction everything works fine .

// This is very frustrating, but in IE if you just write directly // to innerHTML, and elements that are overwritten are GC'ed, // even if there is a reference to them elsewhere while ( cell.childNodes ) { cell.removeChild( cell.firstChild ); }

So I'm trying to loop through the input fields of a datatable and update the data for each cell that contains an input field. I've made a minimal live.datatables.net demo of the way I'm doing it, and it seems like it should work. But the resulting table is screwed up.

Simply click the 'Test' button to see what I mean.

The first cell in the table should read 'update: 0' and the second cell should read 'update: 1', but they instead show 'update: 1' and '1', respectively. The remaining cells show correctly.

I've been pulling my hair out with this problem for two days, and now I'm desperate.

Does this seem like a bug? If not, any idea what the issue is? Or how I might solve it?

Thanks folks!

Hi,

I am replicating almost everything on the Simple Join example at https://editor.datatables.net/examples/simple/join.html; the only difference is that I do not have a users.site database column, as my, say site field is foreign key-ed to the primary key of the main table.

Whenever I try to display a column from the site (joined) table that is a string, I get the following error message:

Uncaught TypeError: Cannot read property 'indexOf' of null jquery.dataTables.js:2990 _fnFilterData jquery.dataTables.js:2990 _fnFilter jquery.dataTables.js:2873 _fnFilterComplete jquery.dataTables.js:2764 _fnReDraw jquery.dataTables.js:2023 (anonymous function) jquery.dataTables.js:3215 _fnBuildAjax.baseAjax.success jquery.dataTables.js:2380 c jquery-1.10.2.js:3048 p.fireWith jquery-1.10.2.js:3160 k jquery-1.10.2.js:8235 r jquery-1.10.2.js:877

That does not happen with numerical values.

Any ideas?

Do we have any performance measurements document or statistics for datatable available ?

Basically I am looking for say if we have x number of columns and y number of rows to be displayed in table it takes this much time.