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

Answer 1

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

Answer 2

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

Answer 3

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