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.
- #example=fNew%20York:p1 – Search
New York, page 2 - #example=fSoftware%20Engineer:od2 – Search
Software engineers, sort by3column in descending order
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.cssdeepLink
Please see Deep linking into DataTables for code and demonstration of deepLink plug-in.
Hello,
Do you need to be using AJAX sourced data in order to make use of the KeepConditions plug in?
I don’t think KeepConditions plug-in imposes any limits on data source of the table, so the table could have HTML-, JavaScript- or Ajax-sourced data.
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.
KeepConditions not working in server side datatables
Is keep conditions able to save selections? If not, is there an alternative to save selections and share as a URL?
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.
Thanks for your reply, and for sharing this article!