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

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

SNK215SNK215 Posts: 3Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • SNK215SNK215 Posts: 3Questions: 1Answers: 0
    edited June 2022

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited June 2022 Answer ✓

    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

  • SNK215SNK215 Posts: 3Questions: 1Answers: 0

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

Sign In or Register to comment.