CODEWITHSUNDEEP
jqueryhtmldatatable
John Guan
John Guan

Reputation: 744

jQuery, DataTables fixed header and column load time is slow with only 376 rows

I am trying to make a table with fixed header and columns using DataTables. Everything works except that the page takes forever to load. I only have 38 columns and 376 rows which makes a total of 14307 cells including the headers. I even used the infinite scroller but it doesn't help. I wonder if it's my coding the problem. Here's the code.

        $(document).ready( function () {
            var oTable = $('#tbl_name').dataTable( {
                "sScrollY": "590px",
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "bScrollCollapse": true,
                "bPaginate": false,
                "sDom": 'tS',
                "bSort": false,
                "bSortClasses": false
            } );
            new FixedColumns( oTable, {
                "iLeftColumns": 4,
                "iLeftWidth": 700
            } );
        } );

Upvotes: 1

Views: 1948

Answers (1)

bpeterson76
bpeterson76

Reputation: 12870

If you're building your table via the dom method (building the table in HTML and then running jQuery on it) then it's going to be a slow process by nature. Keep in mind, that Datatables is doing WAY more than simple scripts like infinite scroller. Switch to a data-driven option like using a JSON string of data or do the full-on AJAX functionality that DataTables allows. Remember, Datatables isn't just formatting things, it's creating an info model that can be manipulated, which is the true power of Datatables that many developers don't even bother to explore.

My company's current app runs hundreds of complex rows in DataTables via a backbone.js model with zero lag at all on the dom side. At a previous job, I used pipelined AJAX Datatables for tables with millions of rows, and the app flew.

Of course, follow best practices with javascript, starting with putting your datatables code at the very end of your HTML (before the body tag) so that it doesn't interrupt loading of other page elements.

Upvotes: 3

Related Questions