Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Datatables - force rendering after setting `bDeferRender: true`

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.

like image 258
anthonybell Avatar asked Mar 27 '26 01:03

anthonybell


1 Answers

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();
like image 62
Raidri Avatar answered Mar 28 '26 15:03

Raidri



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!