Why are columns.render not called when calling DataTable ()? Is draw () called?

Question

I am puzzled by why columns.render is not included in the DataTable () execution pipeline . draw () .

Example:

HTML

<table id="data"> <thead> <tr> <th>TimeColumn</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>234</td> </tr> <tr> <td>345</td> <td>456</td> </tr> <tr> <td>567</td> <td>678</td> </tr> </tbody> </table> <button id="refresh">Refreh</button> 

JQuery

 $(document).ready(function () { $('#data').DataTable({ columnDefs: [{ targets: 0, render: function(data, type, row, meta) { return data + ' time:' + Date.now(); } }] }); $('#refresh').on('click', function() { $('#data').DataTable().draw(); }); }); 

The expected result when clicking the Refresh button is that the time value should start in the first column, but this is not so. The assigned render function is never called after initialization.

( jsFiddle example.)

Is there any workaround or do I need to dig the DataTables code?

Answer 1

Instead of destroying the data and refilling it, I ended up modifying jquery.datatables.js version 1.10.2 .

The main problem is that line 1935 in jquery.datatables.js checks if a line has already been created:

 if ( aoData.nTr === null ) { _fnCreateTr(oSettings, iDataIndex); } 

One way to fix this is to set aoData.nTr = null . But this can disrupt other functions or cause unwanted side effects, so this is not an acceptable solution.

I preferred to add the .draw() function argument instead (line 7137), and adding a parameter called bForceReDraw ( draw() already takes the argument, so we add the second argument):

 _api_register('draw()', function (resetPaging, forceReDraw) { return this.iterator( 'table', function ( settings ) { settings.bForceReDraw = forceReDraw === true; _fnReDraw(settings, resetPaging === false); } ); } ); 

Then I changed the null check on line 1935 to:

 if ( aoData.nTr === null || oSettings.bForceReDraw === true ) { _fnCreateTr(oSettings, iDataIndex); } 

The _fnCreateTr() function also has a null check on nTr (line 1586), so I also needed to change it:

 if ( row.nTr === null || oSettings.bForceReDraw === true ) { nTr = nTrIn || document.createElement('tr'); ... 

Now we just call draw() with a new argument, and everything works as expected.

 $('#data').DataTable().columns.adjust().draw(false, true); 

Answer 2

Everyone has problems with dynamically reloading DataTables. Consider this approach. First destroy the DataTable to re-render.

 var dataSet = []; if ($.fn.dataTable.isDataTable('#yourTable')) { $('#yourTable').DataTable({ "destroy": true, "processing": true, "data": dataSet }); } else { $('#yourTable').DataTable({ "processing": true, "data": dataSet }); } 

Answer 3

I found that unlike .draw() , .columns.adjust().draw(); will run the render function again. But, unfortunately, he does not redraw the table ... (?)

The only workaround I found is a .destroy() table, replace $('#data').html() with its original content and run it again with $('#data').DataTable({ columnDefs: colDefs }); .

 $(document).ready(function () { var table_data = $('#data').html(); var colRender = function (data, type, row, meta) { var today = new Date(); var ms = today.getMilliseconds(); var ss = today.getSeconds(); var mn = today.getMinutes(); var hh = today.getHours(); var time = ' time:' + hh + ':' + mn + ':' + ss + ':' + ms console.log('data+time', data + time); return data + time; } var colDefs = [{ targets: 0, render: colRender }]; $('#data').DataTable({ columnDefs: colDefs }); $('#refresh').click(function () { // $('#data').DataTable().columns.adjust().draw(); // $('#data').DataTable().draw(); $('#data').DataTable().destroy(); $('#data').html(table_data); $('#data').DataTable({ columnDefs: colDefs }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> <link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet"/> <table id="data"> <thead> <tr> <th>TimeColumn</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>234</td> </tr> <tr> <td>345</td> <td>456</td> </tr> <tr> <td>567</td> <td>678</td> </tr> </tbody> </table> <button id="refresh">Refresh</button>