jQuery Datatables performance

Question

I use jQuery with Datatables to display about 300 database rows. The table is on a jQuery UI dialog and is downloaded with an AJAX request. After the download I want to create jQuery UI Buttons on every row for edit and delete. This takes long time (on some 'weak' clients) and it's really annoying. Is there a way to make it faster? I tried INPUT type="button" and is a bit faster but ugly. Any Ideas/Suggestions? Thank you in advance!!!

EDIT the last 2 lines inserting the buttons here is some of the code:

    $('<div id="wdw1000frm"></div>').dialog({
        parent : '#wdw1000',
        autoOpen : false,
        closeOnEscape : false,
        height : 500,
        maxHeight : 500,
        minHeight : 500,
        minWidth : 700,
        position : [479, 68],
        title : 'Arrivals',
        width : 1000
    });
    DWM.showForm("1000", "arrivals", "Arrivals", "Arrivals");
    $("#wdw1000_tbl").dataTable({
        "bJQueryUI" : true,
        "bPaginate" : false,
        "bProcessing" : true,
        "bLengthChange" : false,
        "bFilter" : true,
        "bSort" : true,
        "bInfo" : false,
        "bAutoWidth" : false,
        "sScrollY" : "300px",
        "sDom" : "<\"H\"lfr>tS<\"F\"ip>",
        "fnInitComplete" : function() {
            this.fnSettings().oScroller.fnScrollToRow(64);
        },
        "bDeferRender" : false,
        "oLanguage" : {
            "sProcessing" : "Επεξεργασία...",
            "sLengthMenu" : "Δείξε _MENU_ στοιχεία",
            "sZeroRecords" : "Δεν βρέθηκαν στοιχεία που να ταιριάζουν",
            "sInfo" : "Εμφάνηση _START_ έως _END_ από _TOTAL_ στοιχεία",
            "sInfoEmpty" : "Εμφάνηση 0 έως 0 από 0 στοιχεία",
            "sInfoFiltered" : "(εφαρμογή φίλτρου σε _MAX_ συνολικά στοιχεία)",
            "sInfoPostFix" : "",
            "sSearch" : "Αναζήτηση:",
            "oPaginate" : {
                "sFirst" : "Πρώτη",
                "sPrevious" : "Προηγούμενη",
                "sNext" : "Επόμενη",
                "sLast" : "Τελευταία"
            }
        },
        "aaData" : [['168', '00:10-1', '1339708200', 'TRA 232', 'Sundsvall', 'SDL', '', '', '', '0', '', '0', '3', 'Cancelled', 'CAN', '<div class="Edit"></div>', '<div class="Delete"></div>'], 
                    ['169', '00:45-1', '1339710300', 'AEE 261', 'Varkaus', 'VRK', '', '', '', '0', '', '0', '5', 'New Time', 'NET', '<div class="Edit"></div>', '<div class="Delete"></div>'], 
                    ['170', '01:15-1', '1339712100', 'FPO 228', 'Indianapolis', 'IND', '', '', '', '0', '', '0', '5', 'Diverted', 'DIV', '<div class="Edit"></div>', '<div class="Delete"></div>'], 
    .
    .
    .
                    ['300', '08:10+1', '1339909800', 'LT 3620', 'Sao Joao', 'QSJ', '', '', '', '0', '', '0', '3', '', '', '<div class="Edit"></div>', '<div class="Delete"></div>']],
        "aoColumns" : [{
            "bVisible" : false
        }, {
            "aDataSort" : [2, 1],
            "sClass" : "alignLeft",
            "sTitle" : "STM",
            "sWidth" : "100px"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "FN",
            "sWidth" : "100px"
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "CITY"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "VIA"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "EST",
            "sWidth" : "100px"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "ACT",
            "sWidth" : "100px"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignCenter Editable",
            "sTitle" : "BAG",
            "sWidth" : "100px"
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "REM"
        }, {
            "bVisible" : false
        }, {
            "sTitle" : "&nbsp;",
            "sWidth" : "10px",
            "bSortable" : false,
            "sClass" : "Edit"
        }, {
            "sTitle" : "&nbsp;",
            "sWidth" : "10px",
            "bSortable" : false,
            "sClass" : "Delete"
        }]
    });
    $('#wdw1000_tbl div.Edit').button ({ icons : {primary : 'ui-icon-pencil'},text : false,label : 'Edit'});
    $('#wdw1000_tbl div.Delete').button ({ icons : {primary : 'ui-icon-pencil'},text : false,label : 'ui-icon-trash'});

It's a bit of a sport to make productive comments on code someone can't see. Do we get so many guesses, or is it one-and-done? Please, post your code. — Jared Farrish
– Jared Farrish, Commented Jun 15, 2012 at 23:59
Consider taking it to Code Review. I'd suggest at least caching jQuery objects and other variables where possible. See: stackoverflow.com/questions/5724400/… — Jared Farrish
– Jared Farrish, Commented Jun 16, 2012 at 0:01
I'm trying to post some code! Please wait! Thank you anyway!! — Johntor
– Johntor, Commented Jun 16, 2012 at 0:06

icc97 · Accepted Answer · 2017-04-27 02:05:42Z

4

I approached a similar performance problem by using mRender and fnRowCallback, there I separated the display content from the sorting content and returned an empty content for the display in the mRender function. This reduced the initialization time dramatically.

fnRowCallback is called whenever a row is made visible, so here I created my more "complex" markup. In your example the buttons, in my case I had 2000 rows and some links inside the table that took 15 seconds to display. After applying my fix it was reduced to less than one second. If you are interested in some more detailed code examples just check out my blog post

edited Apr 27, 2017 at 2:05

icc97

13.1k9 gold badges84 silver badges99 bronze badges

answered Oct 16, 2012 at 22:32

AirBorne04

5934 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arcadien · Accepted Answer · 2012-06-16 00:06:27Z

1

You can insert these buttons only when a row catches a mouseover event, and remove them on mouseout? Then you can also probably reuse the DOM elements :)

my 2 cents,

Aurelien

answered Jun 16, 2012 at 0:06

Arcadien

2,27816 silver badges26 bronze badges

3 Comments

Johntor Over a year ago

You have a point here! But I will have 2 ugly rows sitting empty!

Arcadien Over a year ago

Can't you just inject an img element with javascript callbacks?

Johntor Over a year ago

Sorry for the late reply. I will try it and post back!

cantaffordavan · Accepted Answer · 2012-06-16 23:42:50Z

1

Have you considered using the datatables editor that has this functionality built in?

I used the datatables editor for a project that did exactly what you are looking for (the rows were inventory, and the client wanted to be able to add/delete)

http://editor.datatables.net/

And an example: http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

answered Jun 16, 2012 at 23:42

cantaffordavan

1,4474 gold badges26 silver badges44 bronze badges

1 Comment

Johntor Over a year ago

I tried that too, the problem is data validation. I want to provide an external form as an editor with autocmplete, listboxes, multiple select ...

Collectives™ on Stack Overflow

jQuery Datatables performance

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related