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

Question

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
            } );
        } );

"only" 376 rows? You've already identified the source of the problem. Try paginating the data instead. — Blazemonger
– Blazemonger, Commented Sep 12, 2013 at 14:09
On the infinite scroller example, it has over 50000 rows yet, its not lagging — John Guan
– John Guan, Commented Sep 12, 2013 at 14:12
Are you storing your data in the HTML document, or obtaining it from the server via AJAX? — Blazemonger
– Blazemonger, Commented Sep 12, 2013 at 14:55
I know this is very late but you should keep in mind that the fixedColumns plugin has a poor performance because it doubles all the DOM elements and tries to sync all the row heights ... — SmartDev
– SmartDev, Commented Oct 17, 2014 at 8:56

bpeterson76 · Accepted Answer · 2013-09-12 14:26:02Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related