javascript - Tabulator - Reload header filters when returning to page with table

Question

Currently, I have a table using Tabulator(v4.9) with header filters using Ajax Filtering.

var table = new Tabulator("#table", {
  pagination: "remote",
  paginationSize: pageSize,
  placeholder: "No records found",
  ajaxFiltering: true,
  ajaxURL: "modules/tableSource.php",
  ajaxResponse:function(url, params, response) {
    // Format returned data for tabulator pagination
    var lastPage = Math.ceil(response.TotalRecordCount/pageSize);
    var formatted = { 
                      "last_page": lastPage,
                      "data": response.List ? response.List : []
                    }
    return formatted;
  },
  layout:"fitDataStretch",
  movableColumns: true,
  columns:[
    {formatter:viewRowIcon, width:30, hozAlign:"center", headerSort:false, cellClick:function(e, cell){window.location.href = 'view-row.php?id=' + cell._cell.row.data.ID;}},
    {title:"CBN", field:"Ani", headerSort:false, sorter:"string", headerFilter:"input", minWidth:110},
    {title:"Status", field:"Status", headerSort:false, sorter:"string", headerFilter:"select", headerFilterParams:{values:{"new":"New", "notified":"Notified", "resolved":"Resolved"}}, minWidth:110},
    {title:"Creator", field:"submitted_by", headerSort:false, sorter:"string", headerFilter:"input", minWidth:110},
    {title:"Time of Incident", field:"Occurred", headerSort:false, sorter:"datetime", mutator:translateToLocalDate, hozAlign:"center", minWidth:110},
    {title:"COS", field:"Cos", headerSort:false, sorter:"string", headerFilter:"input", minWidth:110},
    {title:"PSAP", field:"jurisdiction", headerSort:false, sorter:"string", headerFilter:"input", minWidth:110},
    {title:"COID", field:"Cpf", headerSort:false, sorter:"string", headerFilter:"input", minWidth:110},
    {title:"Telco", field:"sop_name", headerSort:false, sorter:"string", minWidth:110},
  ]
});

In the table there is a column that has a link to go to view the row on a separate page. When coming back from that page to the table page, the header filter still has the text in the input, however, the filter is not being applied to the data.

So basically, the process is:

1. Load table
2. Type into filter header
3. Table loads with filtered data
4. Click on row to go to new page
5. Click back to return to page with table
6. Table loads
7. Header filter still has the text in the input, but the data has not been filtered

So all I want is for the filters to be reapplied when the table is loaded. Not sure of the best way to do this.

Edit: I found this note in the docs about Persistent Filtering:

Note: Header filters are not currently stored persistently, this feature will be coming in a future release.

So I do understand that currently there isn't a built-in way to do this, but was wondering if there was a workaround. I haven't found a good way to do this, and the main issue seems to be that I can't access the text in the Header Filters until after the Ajax call is being made, so anytime I want to apply the existing header filters, I have to load the table all over again.

Answer 1

等待大神答复