Alternative/Workaround for deferLoading in dataTables v2 ?

stefl0n

In my application I previously used the _deferLoading _ option intensively so that data would not be loaded unfiltered for performance reasons. The data is only loaded when the user sets a filter or uses the search function.

Is there a way to restore that behavior (on the client/javascript side) with dataTables v2 with the deferLoading option gone now?

allan

For the specific case that you specify, if there is no search term submitted, just return an empty data set.

There is no direct replacement for deferLoading - it was very rarely used, had a number of issues that it triggered, and was already taking a surprising amount of code.

Allan

stefl0n

OK, an empty dataset works for a single table for me.

But I also got a dashboard page here with multiple tables (currently up to eight...) placed in widgets. They are pre-filled with JSTL, so there are no futher AJAX calls required.

With dT v1 I was able to transform all of them to Datatables with a AJAX data source, so the user was able to sort and to use pagination.

With the update to dT v2 I now have got 8 AJAX-Posts firing at the same time on page load and here they have to deliver data, otherwise the pre-filled tables would be cleared, wouldn't they?

kthorngren

One option might be to not define ajax for the Datatables. When the user submits a filter request use jQuery ajax() to fetch the data and in the success function use clear() to clear the Datatable and rows.add() to populate with the filtered response.

Kevin

rho

This is the one of the use case where I used defereLoading.

Since datatable required the headers defined in the html I used the first server side ajax to get first draw and for its header construct the table headers doing so required the deferLoading so that I won't get the data twice.

Sample of the old implementation is show below. Since defereLoading is no more is there any thing like pre-hook to function to achive so columns can be built on fly.

fetch(api, {
    method : 'POST',
    params : params,
}).then(function (response) {
    return response.json()
}).then(function (jsonData) {
    const theader = $(`#${tid} thead tr`)
    jsonData.headers.forEach(function (val, i) {
        theader.append(`<th>${val}</th>`)
        opts.columnDefs.push({
            targets : i,
            name    : val,
        })
    })

    new DataTable(`#${tid}`, {
        data         : jsonData.data
        deferLoading : jsonData.recordsTotal,
        processing   : true,
        serverSide   : true,
        ajax         : {
            url         : api,
            type        : 'POST',
            contentType : 'application/json',
        }
    })
})

allan

There isn't really a way around that at the moment - such a construct will require two Ajax calls. The only way around it I can think of is to use ajax as a function to return the already retrieved data for the first call, and then to make the Ajax calls after that. That wouldn't work with state saving, predefined filters and all the stuff though (which might not be an issue in your specific use case).

Allan

rho

wow, that was quick, I was also thinking of exploring ajax function, thank for the conformation.