Server-side, 'custom' ajax - not updating properly

survalent

Here is my table initialization code:

$(document).ready(
function () {

oTable = $('#tableID').dataTable(
{

        "ajax":                
            function (data, callback, settings) {
                if (!datatableAjaxRequestInProgress) {
                    datatableAjaxRequestInProgress = true;
                    ConnectionIndicator('Show_And_Start', $('#connectionIndicator'));
                    $.ajax({
                        data: data,
                        dataType: "json",
                        url: "@Url.Action("AjaxHandler, "Controller")",
                        cache: false,
                        timeout: 35000,
                    }).done(function (returneddata) {
                        //first call my handler to catch potential server-side errors, then pass it on DT
                        datatableAjaxRequestInProgress = false;
                        dataTableAjaxReturn(returneddata, $('#connectionIndicator'), $('#ErrMessage'));
                        callback(returneddata);

                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        datatableAjaxRequestInProgress = false;
                        handleDataTableAjaxError(jqXHR, textStatus, errorThrown, $('#ErrMessage'), strServerTimeoutMessage);                           
                    })
                }
        },               
        "RowCallback": PreserveRowHighlight,
        "serverSide": true,
        "processing": false,
        "paginate": false,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": false,
        "autoWidth": false,
        "scrollY": tableHeight,
        "columnDefs": [
            { "searchable": false, "targets": 0 }
        ],
        "columns":
        [

.... ]
});
};
Problem - The very first data update is not updating the table.
Second one and subsequents update fine.

After playing around I noticed that the table does get updated if after first one I resize the window.

But then resizing the window redraws the table and makes it ask again.

So I tried triggering Datatable.draw()... noticed that if trigger it again within the $(document).ready() i still have same problem - data comes back, but doesn't show up in the table until a later refersh.

So I ended up ducktaping that by adding a timeout draw trigger to end of "ready"

setTimeout(function () {
boolSkipFirstDatatableRequest = false;
var newTable = oTable.DataTable();
newTable.columns.adjust().draw();
}, 50)

and in my ajax function not sending any requests until boolSkipFirstDatatableRequest is switched off - to avoid a useless server request.

This works, but produces a noticeable delay in rendering the table data... I also suspect that this solution may not work on a slower computer where that delay won't be enough. For example if I reduce that delay to 10 milliseconds, the second redraw is triggered too quickly and fails to update the table just as the first one.

This is a potentially large dataset which needs to be self updating - the standard custom refresh will be on a 30 to 120 seconds configurable refresh. So if that first update doesn't render data for slowly rendering computers, my customers will be waiting a while for the next update.

On the other hand if I put that delay to longer then 50 milliseconds it starts being quite noticeable on quick client machines.

So - is there any way to get the table to properly show the records the first time?

survalent

Just discovered that my measurements for the required delay to get data to render varies by browsers - IE11 needs 1000ms delay to render.

Now I am stuck by either putting in a huge delay for all browsers, or making the page vary code by browser.