Possible to save the state across multiple URLs?

scarbachi

Hello,

Coming up short in searching docs and forum posts. If I have the same table structure and columns for multiple URLs, is it possible to configure client to use the same state for all of them? Or would I need to migrate to ajax state and manage this server-side?

Example is a table of orders, where unfiltered is /orders, then also have filtered views like /orders/pending, /orders/paid, /orders/shipped , etc. Ideally a user could reorder columns once, and they would see it when clicking on other similar pages.

Have tried initializing the table using the same HTML class or id across pages, but no luck.

Thank you in advance!

sample initialization:

var dtDefaults = {
    dom: '<"top"f>rt<"bottom"ilp><"clear">',
    order: [],
    stateSave: true,
    stateDuration: 0,
    columnDefs: [
      {
        targets: "no-sort",
        orderable: false,
      },
    ],
  };

  $("#ordersDatatable").DataTable(
    $.extend({}, dtDefaults, {
      colReorder: true,
      order: [[6, "desc"]], // created_at
    })
  );

colin

stateSave uses localStorage to store the table state - since localStorage is available to all URLs within a domain, a state on one page would be available to another page. The naming convention uses the table ID and the URL, appended to DataTables_, so something like:

DataTables_example_/examples/basic_init/state_save.html

Within that structure is a time stamp, so, you what you could do on page load
1. iterate through all the saved states and find the most recent one
2. copy that to the naming convention above for the current page
3. initialise the DataTable - and that would use that state

I don't have an example for that, but it should be fairly straightforward to code.

Colin

allan

Good question - yes it is possible. You need to use stateSaveCallback and stateLoadCallback to define your own storage for the state.

The default state saving uses the table id and the url path to store the state in a location unique to each table. If you want to munge them all together though, then just use a common storage location in your own state storage functions.

Allan

rf1234

is it possible to configure client to use the same state for all of them?

I have the opposite situation: Same table id on multiple pages ... but I adjusted my code for you:

//Data tables default settings
$.extend( true, $.fn.dataTable.defaults, {
    stateSaveCallback: function(settings,data) {     
        // var key =  settings.nTable.id + "_" + webPage;
        var key = "yourValue";
        localStorage.setItem( key, JSON.stringify(data) );   
    },
    stateLoadCallback: function(settings) {
        // var key = settings.nTable.id + "_" + webPage;
        var key = "yourValue";
        return JSON.parse( localStorage.getItem( key ) );
    }
 } );

scarbachi

Thanks all, ended up doing this so that tables with the same HTML id all share settings.

  var dtDefaults = {
    dom: '<"top"f>rt<"bottom"ilp><"clear">',
    order: [],
    stateDuration: 0,
    stateSave: true,
    columnDefs: [
      {
        targets: "no-sort",
        orderable: false,
      },
    ],
  };

  var userConfigurableDataTable = $.extend({}, dtDefaults, {
    colReorder: true,
    stateSaveCallback: function (settings, data) {
      try {
        localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data));
      } catch (e) {}
    },
    stateLoadCallback: function (settings, callback) {
      try {
        json_string = localStorage.getItem('DataTables_' + settings.sInstance);
        callback(JSON.parse(json_string));
      } catch (e) {
        return {};
      }
    },
  });