Keep table and row data until after ajax request has completed
Keep table and row data until after ajax request has completed
frasen
Posts: 4Questions: 1Answers: 0
Our website returns a html table with about 80-120 rows, depending on the request. This html table and it's rows are server-side generated and not through datatable's ajax/javascript functionality. The row data comes from a cache on the server and may be stale/ourdated. If it's outdated, then the client sends an ajax request to retrieve a fresh/current result and the table is updated with the current data using datatables ajax/javascript functionality.
The problem we face is that the user does not get to see the row data generated by our server for the NON ajax (first/initial request), because as soon as the ajax request is send out the server-side generated row data disappears and the "Loading ..." message (loadingRecords:) is being display.
How can we make sure that the the initial rows of the html table created by the server are being displayed UNTIL the ajax request has completed? In essence we want to show the user a table with row data until the ajax request has finished and then use the newly returned data from the ajax call to redraw the table.
Why are doing this? The ajax request takes a long time. During this time we already want to show the user some data. Currently the user only sees the "Loading..." message, but not our server-side generated data.
Answers
Do you know why that is? 80-120 rows seems like a very small amount of data, unless individual rows are unusually large.
The 80-120 rows are being assembled by making system calls to external servers. The calls being made vary between 6-14. The longest lasting call may take up to 5 seconds.
Your question does not really address the problem we are trying to solve, which really is how to update a server-side generated static table with an ajax request and to display the static rows UNTIL the ajax request has completed.
We noticed that adding "deferLoading": ROWCOUNT does what we want but the problem here is that the ajax result set is being added. So the table contains duplicates. Each row appears twice.
We have tried to clear the static rows of the table after the ajax request has completed, by adding the followin javascript to the datatable constructor:
"preDrawCallback": function( settings ) {
$(this).DataTable().clear();
},
The problem here is that the tables rows are deleted, before the ajax result is returned. We would like to clear the table just after the ajax request has completed and before the ajax rows are being added.
Ok, we solved the problem. The following code does what we want to achieve:
$('#thetable')
.on('xhr.dt', function ( e, settings, json, xhr ) {
$('#rides').DataTable().clear();
} );