I have a table with 1000+ records and I am using bDeferRender: true. I have a button that when clicked can select any of the records. Here is a jsfiddle showing the issue. Here is the code:
the_data = [['1', '1', '1'], ['2', '2', '2'], ['3', '3', '3'], ['4', '4', '4'], ['5', '5', '5'], ['6', '6', '6'], ['7', '7', '7'], ['8', '8', '8'], ['9', '9', '9'], ['A', 'A', 'A'], ['B', 'B', 'B'], ['C', 'C', 'C'], ['D', 'D', 'D'], ['E', 'E', 'E'], ['F', 'F', 'F'], ['G', 'G', 'G'], ['H', 'H', 'H'], ['I', 'I', 'I'], ['J', 'J', 'J'], ['K', 'K', 'K'], ['L', 'L', 'L'], ['M', 'M', 'M'], ['N', 'N', 'N'], ['O', 'O', 'O'], ['P', 'P', 'P']];
$(document).ready(function () {
var oTable = $('#the_table').dataTable({
"aaData": the_data,
"bDeferRender": true,
"aoColumns": [
{ "mData": "Year", "sTitle":"Year" },
{ "mData": "Month", "sTitle":"Month"},
{ "mData": "Savings", "sTitle":"Savings" },
]
});
$('#btn1').on('click', function() {
//output: 10
alert($('#the_table').dataTable().fnGetNodes().length);
//how to do this??
forceRender();
//this should now output 25
alert($('#the_table').dataTable().fnGetNodes().length);
});
});
If i use bDeferRender: false then $('#the_table').dataTable().fnGetNodes().length will equal 25. I want to defer rendering of the table, but when the button is clicked I want the table to actually ALL the records.
Per this post in the DataTables forum there is no method to directly force rendering of all rows in the table. As workaround you can set the display length to show all rows (which will then render all rows) and then set it back.
var settings = table.fnSettings();
var oldDisplayLength = settings._iDisplayLength;
settings._iDisplayLength = -1;
table.fnDraw();
settings._iDisplayLength = oldDisplayLength;
table.fnDraw();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With