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 Might Also Like

Comments

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)

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