deferRender not working?

JoeJoeJoe

I have a very large table that takes 10's of thousands of rows from a sql server. At the moment I have to severely limit the amount of data being loaded, otherwise the table takes ages to load. My understanding is that deferRender should help fix this issue, however it doesn't appear to be doing anything. This is my code, thanks!:

$(function () {
    WtmHomePage.initialise();
});

var WtmHomePage =
{
    vars: {
    },
    fn: {
        ajaxPost: function (sFunction, onSuccess, onError, data, passThroughData, iTimeoutMillis) {

            if (typeof iTimeoutMillis !== "number") {
                iTimeoutMillis = 30000;
            }
            if (typeof passThroughData === "undefined") {
                passThroughData = {};
            }
            if (typeof onSuccess !== "function") {
                onSuccess = function () { };
            }
            if (typeof onError !== "function") {
                onError = function () { };
            }
            if (typeof data === "undefined") {
                data = null;
            }

            var sCsrfToken = $("input[name='__RequestVerificationToken']").val();
            if (typeof sCsrfToken !== "string") {
                sCsrfToken = "";
            }

            // Make ajax call
            $.ajax({
                type: "POST",
                url: "../Home/" + sFunction,
                contentType: "application/json; charset=utf-8",
                processData: false,
                dataType: "json",
                headers: { "X-XSRF-Token": sCsrfToken },
                data: data === null ? null : JSON.stringify(data),
                success: function (response, status, jqXhr) {
                    // Only send the data back because we dont want to handle two separate
                    // data layouts. This fails horribly if someone names a variable "d".
                    if (typeof response.d !== "undefined") {
                        onSuccess(response.d, status, jqXhr, passThroughData);

                    } else {
                        onSuccess(response, status, jqXhr, passThroughData);
                    }
                },
                error: function (jqXhr, status, errorName) {
                    // Handle generic errors if they exist, otherwise forward to error handler

                    if (jqXhr.status === 401) {
                        // Unauthorised. Force a refresh
                        window.location.href = window.location.href;
                        return;
                    }
                    else if (status === "timeout") {
                        // Function call timeout
                    }

                    onError(jqXhr, status, errorName, passThroughData);
                },
                timeout: iTimeoutMillis
            });
        },

        //mynewFunction: function () {
        //}
    },

    initialise: function (data) {
        WtmHomePage.fn.ajaxPost("GetTaskLog",
            function (data, status, jgXhr, params) {

                //INIT CHILD TABLE
                $('#WTM_LOG').dataTable({
                    "deferRender": true,

                    //HIDE PAGINATION IF PAGES <= 1
                    "fnDrawCallback": function (oSettings) {
                        if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
                            $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
                        }
                        else {
                            $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
                        }
                    },

                    "autoWidth": false,
                    "dom": "rtp",
                    "order": [[0, "desc"]],
                    "pageLength": 20,
                    "processing": true,
                    "data": JSON.parse(data),
                    "selector": ":not(:first-child)",
                    "sPaginationType": "simple_numbers",
                    "language": {
                        "paginate": {
                            previous: "<",
                            next: ">",
                        }
                    },
                    "columns": [
                        {
                            "data": "TaskSchedulerLogUid",
                            "visible": false
                        },
                        {
                            "data": "TaskName",
                            "visible": false
                        },
                        {
                            "data": "StartDate",
                            "render": function (data, type, row) {
                                var dateSplit = data.split("");
                                if (type === "display") {
                                    return dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18];
                                }
                                return data;
                            },
                        },
                        {
                            "data": "EndDate",
                            "render": function (data, type, row) {
                                var dateSplit = data.split("");
                                if (type === "display") {
                                    return dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18];
                                }
                                return data;
                            },
                        },
                        {
                            "data": "ErrorCount",
                            "render": function (data, type, row) {
                                if (type === 'display') {
                                    return (data === 0)
                                        ? data = '<span data-search="0"></span>'
                                        : data = '<a href="http://localhost/WTM/LogError/Index?id=' + row.TaskSchedulerLogUid + '" type="hidden" class="fas fa-exclamation-triangle" style="color:red"></a>';
                                }
                                return data;
                            },
                        },
                        {
                            "data": "EventCount",
                            "render": function (data, type, row) {
                                return (data > 0)
                                    ? data = '<a href="http://localhost/WTM/Details/Index?id=' + row.TaskSchedulerLogUid + '" type="hidden" class="fas fa-list" style="color:blue"></a>'
                                    : data = '';
                            },
                        },
                    ],
                    columnDefs: [
                        {
                            targets: 2
                        }
                    ]
                });

            },
            function (jqXhr, status, errorName, params) {
                alert("Child Table Error")
            },
            null,
            null,
            30000);
    }
}

kthorngren

It doesn't look like you are doing a lot of stuff in the Datatable init. deferRender can help but you need to look at all phases of the page loading to see where the delay is. You can time the Datatable init time with something like this script:
http://live.datatables.net/fomaqofu/1/edit

You might be interested in this discussion of deferRender:
https://datatables.net/forums/discussion/comment/136292/#Comment_136292

I've never looked at how long it takes JSON.parse() to parse large amounts of data but you may want to try the same timing technique to see how long it takes. Move it from "data": JSON.parse(data), to run before initializing Datatables, place the timer code around it and assign is a variable. Then in Datatables assign that variable to the data option.

Kevin

JoeJoeJoe

It took 20/23 milliseconds to JSON.parse, which sounds pretty good to me.

Table load time varies wildly depending on the browser. Chrome takes around 250/280 milliseconds, whereas Internet Explorer takes around 800/850 to load the page.

I tried the the test given on the other page you linked to see if deferRender is working and it appears to be. Type and sort come up as: 22500, display shows 20, which is the correct amount of rows.