Regarding deferRender & building datatables

getalex

Am I correct in thinking that the deferRender option doesn't do anything when you build the DataTable from an Ajax 'success' callback? in other words, if I set up the DT early on, and later drive the contents through a button click to call the Ajax function that will populate the DT through an iterative $each function... illustrated below:

$.ajax({
        type: "GET",
        cache: false,
        data: params,
        url: ajaxUrl,
        contentType: "application/json; charset=utf-8",
        success: function (boxes) {

            $.each(boxes, function (i, data) {
                var box = new boxView(data); // does mapping
                dt.row.add(box); // adds to dt
            });
        }
    });

I have about 10k records, I don't want to go through serverSide so I figured I'd try deferRender without much luck in the way I need to build the data tables.. looking for confirmation that this doesn't work this way, or some help on how to set it up..

Thanks in advance!

getalex

Figured I'd share the dt instance setup code below:

var dt = $('#boxTable').DataTable({
    deferRender: true,
    columns: [
        { data: null, defaultContent: '', orderable: false, className: 'details-control' },
        { data: 'Id', title: 'Box ID' },
        { data: 'BoxType', title: 'Box Type' },
        { data: 'BoxLabel', title: 'Box Label' },
        { data: 'Collection', title: 'Collection' },
        { data: 'BoxStatus', title: 'Status' },
        { data: 'ItemCount', title: 'Contents', searchable: false, className: "datatable-cell-alignCenter" },
        {
            data: null, orderable: false, searchable: false, title: 'Actions',
            render: function (data, type, row) {
                if (type === 'display') {
                    return getRowActions(row);
                } else return data;
            }
        }
    ],
    order: [1, 'desc']
});

kthorngren

Sounds like, per the docs, deferRender works with data loaded via the ajax option or the data option.

Without know more about what is triggering the data load and when I would look at the following options:

1. Depending on the server scripts it might be more efficient for the server to query and process the data into the structure you want instead of the loop you have in the success function. Then you could possible use either the ajax or data to load the data.
2. Instead of using row.add() in the loop build an array then once the loop is complete either initialize Datatables using the data option or use rows.add(). Not sure but supplying an array of data to rows.add() might be more efficient then using row.add() individually.

Kevin

getalex

Kevin - thank you, I'll give that a shot and see if it speeds things up..
it would be great to get more insight to how deferRender was implemented and how it's supposed to help optimize loading.. I don't want to handle sorting/filtering/paging myself, that would defeat a lot of the purpose here.

kthorngren

This discussion may help:
https://datatables.net/forums/discussion/comment/136292/#Comment_136292

Kevin

getalex

So I have this modification in place.. still slow to load, I'm guessing it's the mapping of the objects in the result set … if I need to manipulate the data before I post it to the table, does deferRender yield itself useless? there's no logic check but instead mapping data from the JSON to observable objects.. I cant just populate the data as is from the ajax callback.

dt = $('#boxTable').DataTable({
        deferRender: true,
        ajax: {
            type: 'GET',
            data: params,
            url: '/site/GetBoxes',
            dataSrc: function (json) {
                for (var i = 0, ien = json.length; i < ien; i++) {
                    json[i] = new boxView(json[i]); // maps properties
                }
                return json;
            }
        },
        autoWidth: false,
        columns: [ … ]
}
...

I even set the autoWidth property to false! … truly appreciate the fast responses in this forum, thank you in advance.

kthorngren

You can output some timers like this example to see how long it takes for the for loop. Start the timer before the for loop and use console.log after the for loop (before the return json). This should help you determine where the problem is. Also turn deferRender off to see if there is a different.

http://live.datatables.net/fomaqofu/1/edit

Kevin

getalex

Thank you for the last reply, the timers for some reason don't seem to vary much in my console output. i'm seeing slow load times with either approach and thinking perhaps it's to do with the declaration of a new boxView object for each datarow.
Is there another way to load the DT with special objects not just a generic JSON response object? each one of my boxView objects contains observables that can be updated through other page events later - hence they don't remain statically drawn was the idea. but it appears to be a hog... I don't want to iterate through all 10,000 rows on load, it kills my client machines.

kthorngren

I'm not familiar with boxView but if you only need it for the rows that are visible then maybe rowCallback or createdRow might be the place to enable it. The thought is with one of those callbacks you can enable the observers as the page is displayed.

If this json[i] = new boxView(json[i]); doesn't manipulate the data then a good test might be to remove the loop and just return the json data. This will give you an indication of how long Datatables needs to build your table.

Kevin