How to prevent data from disappearing when doing an action ? (Sort, search...)

SNK215

I created a table that is filled with data coming from an API. Basically it displays info about files on my Google Drive via the Google Drive API v3 (screenshot : https://imgur.com/a/iMCncd3 ).
(I don't know why but i can't use the toolbar when creating this post so sorry for bad formatting).
So the table is filled when i authorize google to access my drive (with an authorize button). That means that the table is empty until i authorize google.
My problem is that when the table is filled with data, and i click on one of the columns to sort the data, the table becomes empty and i have to call the API to get the data again.
screenshot of empty table: https://imgur.com/a/uhA7Zlr
Basically i can't use the tools that datatables provide.
Help would be greatly appreciated. Thank you.

kthorngren

That doesn't sound normal. Did you turn on Server Side Processing, ie, serverSide: true. If you did, does the API support the server side processing protocol? Don't enable serverSide: true if your server script doesn't support the protocol.

Do you get errors in the browser's console when sorting the table?

Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

SNK215

Thanks for your quick answer.
I did not turn on server side processing and i don't know if the API supports the server side processing protocol (i have been coding for 6 months only so i'm still a beginner).
I don't have any error in the browser's console when sorting the table (im using Firefox).
He is a link to a test case on JS Bin : https://jsbin.com/qosimodilo/1/edit?html,js,output
You have to click on "Authorize", then the table will be filled with the data.
I don't know if it'll work for you because i had to create an API key and a Client ID OAuth 2.0 in order to use the Google Drive API.
Thanks again. Even if you can't help me in the end i'm really grateful.

kthorngren

Thanks for the test case. I get Error 403: access_denied but thats ok I think I see the issue. You are populating the table by directly manipulating the DOM. Datatables doesn't know that any data was added to the table. See this FAQ for options.

Kevin

SNK215

Your answer helped me a lot, i managed to make it work.
I can't thank you enough !

SpaW

Hey, What was your solution ? I'm doing something similar but can't quite figure it out

allan

@SpaW Perhaps you could link to your page so we can have a look at your specific situation and try to help?

Allan