jQuery DataTables: Save and restore table state using unique URL

jQuery DataTables has built-in the ability to save and restore table state using stateSave option. However it is not enough when you need to share table state with someone.

Justin Hyland wrote an excellent Keep Conditions plug-in to generate a unique URL hash when table state changes thus allowing to bookmark state of the table or share a link with a colleague or friend.

Allan Jardine, author of jQuery DataTables, also released official deepLink plug-in that has similar functionality but doesn’t yet have the ability to generate unique URL representing table state.

Keep Conditions

For example, the links below can set filtering, ordering and page of the demo table by using unique URL hash.

You can also generate a link to current table state dynamically using keepConditions.structureHash() API method.

Example

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
$(document).ready(function(){
   var table = $('#example').DataTable({
      ajax: '/lab/articles/jquery-datatables-alphabetical-search/arrays.txt',
      keepConditions: true
   });
});

In addition to the above code, the following Javascript library files are loaded for use in this example:

//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
//cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js
//cdn.rawgit.com/jhyland87/DataTables-Keep-Conditions/118c5e107f1f603b1b91475dc139df6f53917e38/dist/dataTables.keepConditions.min.js

The following CSS library files are loaded for use in this example to provide the styling of the table:

//cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.css

deepLink

Please see Deep linking into DataTables for code and demonstration of deepLink plug-in.

You May Also Like

Comments

  1. Hi Ryvkin, thank you for your article on this. This is a great tool. It’s sad that it’s discontiued now 🙁
    My question: is there any way to make this work with column filtering enabled? I only get it to work with on the search filter. Thanks in advance.

  2. Is keep conditions able to save selections? If not, is there an alternative to save selections and share as a URL?

    1. Unfortunately Keep Conditions plug-in is not able to save/restore selected rows. I am not aware of the alternative solution. Your best bet would be to modify Keep Conditions plug-in to add support for row selection saving/restoring since this plug-in is no longer being actively maintained.

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.