How to setup datatable to use cached data after initial load

gh2m

I have a large amount of data to load and loading can take up to 20 seconds or more at times. I tried following hoping the datatable will use cached data but it doesn't help. Maybe I didn't do it right. Is there a way I can configure the datatable to use the cached data after initial loading of the day? I need to reload the page from time to time for other function. I am hoping datatable has a function to check if cached data is available and use it if it is instead of hitting the URL every time I reload the page.

var table = $('#example').DataTable( {
ajax: {
"url": <url>,
"type": "GET",
"cache": true,
headers: {
"Cache-Control": "max-age=300"
}
},
......
})

kthorngren

Not sure whether there is a way for Datatables to use the cached data.

Have you looked to see how long the it takes for the response versus how long it takes for Datatables to render the table?

This FAQ provides information about how to improve Datatables load times.

Kevin

gh2m

I have 4 datatables on the page, 2 of them take quite bit time. I inspected the Network tab and see one of the URLs took 14 seconds and another took 6 seconds. I assume those are the response time. I do have "deferRender": true, for both datatables which is big help. Without deferRender on, it will take additional 12+ seconds to render. My 2 big datatables do not need to be fully rendored for the page to open up because they are used in a tabbed modal popup window. So my page actually serves up within 5 second when first loaded. The issue is if a user clicks a button which requires page reload when the ajax calls have not completed yet. In that case the same ajax call (for the datatables) kicks off before the first run has not finished yet. I am trying to find a way to not have to kick off the ajax call if it is already in process. I thought using caching data may help me. There may be other ways to solve my problem. Any help would be greatly appreciated.

kthorngren

Maybe you can use initComplete to enable the reload button once all the tables have been loaded. With 4 tables you could use a variable to increment each initComplete. Once it reaches 4 then enable the button.

Kevin

gh2m

You just made me thinking something. Since user clicking a button only needs to refresh the datatable that is much faster to load then the other two heavy datatables, what I really need to do is to refresh that datatable only, instead of refreshing the whole page. Is there a function to do that? I am not talking about the client side .draw() function. I need to reload the ajax url for that lighter table in order to bring the back-end change to the front-end.

kthorngren

I need to reload the ajax url for that lighter table in order to bring the back-end change to the front-end.

Yes, use ajax.reload() for this.

Kevin