DataTables (Table plug-in for jQuery) continue where you left off when navigating away from and back to a DataTable

Question

I have been using DataTables to make database data easy to search through for site administrators. I have been getting lots of requests for users to be able to continue where they left off in the DataTable when clicking on an entry and navigating back to the table. I know I could start from scratch and probably bring this functionality to the table with a mostly server-side solution, but I was hoping there was a somewhat simple way to capture the DataTables data that is on the client-side and serve it to my server-side application to be able to re-draw the datatable where they left off when they navigate back to it. The main reason I would like to stick with DataTables is that I am using it dynamically for nearly 50 different database tables, and I really dont want to have to implement an entirely different solution for all these tables. I would prefer to just utilize DataTables in such a way that I can dynamically add this functionality to Datatables for all 50 pages. Any helpful pointers would be much appreciated.

It may be necessary to note that I am using PHP on the server side. (More specifically Symfony2 framework).

Answer 1

DataTables has some built-in functionality for handling this. The docs refer to this as "state saving".

From the docs:

DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page.

This is enabled using the stateSave option in the config object you pass into the DataTables method, like this:

$(document).ready(function() {
    $('#example').dataTable( {
        stateSave: true
    } );
} );

You can also control the length of time it is saved using the stateDuration option.

Please be aware of this warning in the docs:

The built in state saving method uses the HTML5 localStorage and sessionStorage APIs for efficient storage of the data. Please note that this means that the built in state saving option will not work with IE6/7 as these browsers do not support these APIs.

DataTables provides the stateSaveCallback and stateLoadCallback options to work around this if you need to support those older browsers (eg by using cookies or server-side solutions).

The full documentation can be found here: https://datatables.net/examples/basic_init/state_save.html

Answer 2

You are likely going to have to get into browser history manipulation and looking at the HTML5 history.pushStat. There are lots of good tutorials on the net. Have a look at:

http://diveintohtml5.info/history.html

for some more information on history manipulation.