(as posted on stackoverflow)
I have a table which uses JQuery DataTables. It's a list of items each one with an hyperlink. When the user clicks on that hyperlink they go to a separate 'detail' page. When they go back I'd like them to find the table how they found it.
This is the initialisation script for the table:
$(document).ready(function() {
// Setup - add a text input to the cell's headers
document.querySelectorAll('#mainTable thead th')[1].innerHTML += '<input type="text" placeholder="Search" />';
document.querySelectorAll('#mainTable thead th')[2].innerHTML += '<input type="text" placeholder="Search" />';
document.querySelectorAll('#mainTable thead th')[3].innerHTML += '<input type="text" placeholder="Search" />';
document.querySelectorAll('#mainTable thead th')[4].innerHTML += '<input type="text" placeholder="Search" />';
// DataTable
var table = $('#mainTable').DataTable( {
colReorder: true,
lengthMenu: [25, 50, 75, 100 ],
retrieve: true,
saveState: true,
"columns": [
{ "orderable": true,
"className": "dateSent" },
{ "orderable": false },
{ "orderable": false },
{ "orderable": false },
{ "orderable": false },
{ "orderable": false },
]
} );
// Apply the filter
$("#mainTable thead input").on( 'keyup change', function () {
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
} );
});
As it is, every time the user clicks 'back' from the detail page they'll find the table at page 1, even if they left it at page 3.
The only workaround I have found is using the code:
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'DataTables', JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
return JSON.parse( localStorage.getItem('DataTables') );
},
This is DataTables 1.10.20. Why can't I use the saveState option? When using it, the localStorage of my browser looks empty, and doesn't get written when I change table-page.