title: Create Page Persistence with Tabulator
body: <p>I'm trying to enable a user to be able to leave the page with Tabulator on it and come back and it loads the same view they had before (including the page they were on, filters, and sorters they had enabled).</p>
  
  <p>I have tried making it work using Tabulator's persist feature (as suggested below) but I get an error of: <em>Pagination Error - Requested page is out of range of 1 - 1: 3</em></p>
  
  <pre><code>        //define new tabulator instance
          var table = new Tabulator("#production-data-table", {
              ajaxURL:"scripts/order_status.php?action=fetch_production_data", //ajax URL
              pagination:"remote",
              persistenceMode: "local",
              persistenceID: "production-data",
              persistence: {
                   sort: true, //persist column sorting
                   filter: true, //persist filter sorting
                   group: true, //persist row grouping
                   page: true, //persist page
                   columns: true, //persist columns
              },
              ajaxFiltering:true,
              ajaxSorting:true,
              layout:"fitColumns",
              columns:[
                  {title:"Enterprise", field:"Enterprise", sorter:"string", width:100, headerSort:false},
                  {title:"Job Number", field:"Job Number", sorter:"number", width:100, headerSort:false},
                  {title:"LN #", field:"LN #", sorter:"string", formatter:"html", align:'center', width:80, headerSort:false},
                  {title:"Description", field:"Description", sorter:"string", headerSort:false},
                  {title:"QTY", field:"QTY", sorter:"string", headerSort:false, align: 'center', width: 40,},
                  {title:"AS400 Ship Date", field:"AS400 Ship Date", sorter:"date", align:"center", width:100},
                  {title:"Exp. Ship", field:"Est Ship", sorter:"date", align:"center", width:100, headerSort:false},
                  //{title:"QC", field:"QC", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                  {title:"Pole Barn", field:"Pole Barn", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                  {title:"Thermoforming", field:"Thermoforming", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                  {title:"Vinyl/Paint", field:"Vinyl/Paint", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                  {title:"FA1", field:"Fnl Asmb 1", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                  {title:"FA2", field:"Fnl Asmb 2", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                  {title:"Crating", field:"Crating", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                  {title:"Shipping", field:"Shipping", sorter:"string", formatter:"html", align:'center', width:101, resizable:false, headerSort:false},
                  {title:"New", field:"New", visible:false},
                  {title:"Revised", field:"Revised", visible:false},
              ],
              ajaxResponse:function(url, params, response) {
                  var obj = JSON.parse(JSON.stringify(response)); //parse response
                  var array_to_output = obj['tabulator_get_session'];
  
                  console.debug(obj['tabulator_get_session']);
                  console.debug(obj['current_page']);
  
                  return response;
              },
  
              rowFormatter:function(row) {
  
                  var data = row.getData();
                  var data = JSON.parse(JSON.stringify(row.getData()));
                  var orderNew = data['New'];
                  var orderRevised = data['Revised'];
  
                  if ( orderNew == 1 ) {
                      row.getElement().style.backgroundColor = "#69db88";
                      row.getElement().style.fontWeight = "bold";
                  }
  
                  if ( orderRevised == 1 ) {
                      row.getElement().style.backgroundColor = "#dbd069";
                      row.getElement().style.fontWeight = "bold";
                      row.getElement().style.fontStyle = "italic";
                  }
  
              },
              placeholder:"No Data Available", //display message to user on empty table
  
          });
  </code></pre>
  
  <p>I would have left a comment instead of editing the post. But the website won't allow me to.</p>