Saving current page (pagination) in local storage, then loading datatable from that page on load?

kbessemer

I am using ReactJS and datatables, so far has been compatible for my needs.

I am wondering if there is a way to save the current page of the data table into local storage (and also the number of results per page), so that when my user navigates away from the screen with the datatable and then navigate back to the datatable it will programmatically take them to the page they were on previously.

Thank you for any help you can provide

kthorngren

Have you looked at the stateSave option?

Kevin

kbessemer

Yes, just tried that, I am getting this error: https://datatables.net/manual/tech-notes/3

var table;

$(document).ready( function () {

table = $('#DeviceTable').dataTable( {
stateSave: true,
stateSaveCallback: function(settings,data) {
localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
},
stateLoadCallback: function(settings) {
return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
}
} );

table.on('search.dt', function () {
  dispatch(setSearchPhrase(table.search()));
});

} );

kbessemer

It seems to be functioning how it should, but there is an error popup everytime you load the screen with the datatable... is there any way to suppress these errors?

kbessemer

Ok... the solution, Thank you for pointing me in the right direction...

$(document).ready( function () {
    $.fn.dataTable.ext.errMode = 'none';
    var table = $('#DeviceTable').on( 'error.dt', function ( e, settings, techNote, message ) {
        console.log( 'An error has been reported by DataTables: ', message );
    } ).DataTable( {
        stateSave: true,
        stateSaveCallback: function(settings,data) {
            localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
          },
        stateLoadCallback: function(settings) {
          return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
          }
      } );

    table.on('search.dt', function () {
      dispatch(setSearchPhrase(table.search()));
    });

  } );