Changes made in InitComplete callback keep getting reverted once done.

temuujin

Hello, I am rather new to javascript and datatables,

I am making a serverside table with an ajax call to populate some of the columns. I wanted to populate the rest of the columns with a InitComplete callback making an ajax request per row (so it appears one by one). This works but as soon as it is done, the changes made in the InitComplete callback (using the api row().data().draw() ) are reverted.

How can I achieve what I am trying to get which is to load some of the columns on initialisation, and then request the rest afterwards per row (because it is slow to get).

Thanks in advance!

kthorngren

I don't completely understand what you are describing but initComplete only runs once when the Datatable is initialized. If you want to manipulate the XHR response the xhr event may be what you are looking for.

Kevin

temuujin

Sorry it wasn't clear. Basically, imagine a table with 2 columns. Name and Number of Calls. The second column takes super long to gather. So when I try to get all the data on initialisation, it takes a long time to display anything. But I want the table to display the names at least while the second column is populating one by one (so it feels faster).

kthorngren

Thanks for the clarification, makes sense.

How can I achieve what I am trying to get which is to load some of the columns on initialisation, and then request the rest afterwards per row (because it is slow to get).

One option may be to use either drawCallback or draw, they are essentially the same. You can then just fetch the data for the rows being displayed.
Using rows().every() with a selector-modifier of `{page: 'current'} you can determine the displayed rows then fetch just for them.

Otherwise it sounds like your initComplete option may be the way to go. Are you using Datatables API's to update the rows? Sounds like you are directly updating the DOM which Datatables doesn't know about. Maybe you can post your code.

Maybe one of the options discussed in the Slow Datatables FAQ may help.

Kevin

temuujin

Thanks for the help. I am not sure if I can post code here (i'm an intern at a company so...).

Anyways, I have an idea of what the cause of my problem is. I think that since the datatable is server side, the changes I make to the table in the InitComplete callback using the api are only client side so the datatable shows them briefly before resetting to what the ajax returns in its initialisation. I think this makes sense.

So now I am just thinking of how to affect the datasource on the serverside with the behaviour I want. I am currently thinking of changing the datatable ajax URL using the api on InitComplete, but now I am stuck as to how I would get the rows 1 by 1, because it isn't as flexible as just making ajax requests in a loop like I was doing before

kthorngren

Like I said initComplete only runs once. If you are using server side processing then you will want to look at the first option I mention. This way you can fetch the additional row data each draw. Without seeing the code its hard to say but presumably you can move the initComplete code you have to drawCallback. For efficiency you will want to make sure to fetch the additional data for only the rows displayed.

Kevin