How can I set the table instance or ID to use with stateSave?

greg.blass

I'm giving a little background here, but please bear with me as the question is still related to DataTables - I just wanted to explain the issue I'm facing:

Background:

I'm using DataTables in conjunction with a Javascript library called "Turbolinks" which basically turns your application into a Single Page Application (SPA) without all the overhead of using a true client-side framework. It is extremely useful for Ruby on Rails application performance.

There's a couple of headaches it introduces though - one is compatibility with DataTables. I've got it working pretty well by basically destroying any DataTable on a Turbolinks navigation, and then re-initializing it on turbolinks page load again. This method works well and seems to be the all-around accepted answer as to the best practice to get DataTables to work with Turbolinks.

Question:

On of the last features / finishing touches I'm trying to add to some of my applications is state saving. The issue I'm facing is that every time a table is destroyed/re-initialized on a page navigation, the...I'm actually not quite sure what to call it, but it looks like from inspecting the settings object on the stateSaveCallback - it looks like its the "sInstance" and/or the "sTableId": "DataTables_Table_0".

Then the localStorage key gets set as: DataTables_DataTables_Table_0_/current_path: "{data: data}", where current_path is whatever path/page you're on.

Then when it get re-initialized upon returning to the page, it gets set as DataTables_Table_1, and so on and so forth - so the state never gets correctly loaded.

Is there a way to override that ID so that it doesn't increase the last '0', '1', etc at the end of it? That way when the table is re-initialized, it will pull the saved state from just DataTables_Table/current_path?

Also open to other strategies of course.

greg.blass

When I navigate back to the page, $.fn.dataTable.tables() shows two objects in the array (table#DataTables_Table_0 and table#DataTables_Table_1).

I'm doing a dataTable destroy(); before leaving the page...but its not removing it from there.

Any way to explicitly reset that when I do a dataTable.destory()?

greg.blass

So even if I clear that out by using destroy in the right callbacks, DataTables still keeps incrementing that counter on every table draw. I need some way to set the load the save state keys so it will work with that number increasing.

greg.blass

The answer is to just give the table an ID! If you give the table an ID, DataTables won't have to keep giving it its own ID with an incrementing number.

leonardopc

Wow, I just want to thank you for posting the answer to this! StateSave was driving me mad creating different IDs in my React application! Everytime it would create a new one and forget the column visibility settings.
By giving the table HTML element an ID it stopped doing that and my problem is solved.