单击后退或刷新页面后如何保留过滤器

Question

目前我正在处理 laravel 项目的维护。 我想在单击刷新或从另一个页面返回后保留过滤器。

有 4 个数据表，分别是 New、Complete、Cargo 和 Hold。 每个都有自己的目的来显示数据。

我尝试在 New 上过滤数据表，但是一旦我将页面或 go 刷新到另一个页面并单击返回，它就会重新加载并显示表中的所有数据。 至于另外3个，我3个都试了，都能保留滤镜。 只有新建的数据表不能保留过滤器。

所有 4 个代码几乎相同。

起初我在发现 statesave 之前尝试 history.back() 。

我检查了状态保存，它对所有 4 个都启用了。

manifest.js（新的数据表）

setTimeout(function(){ 

new Datatable().init({
    src: $("#datatable-new"),
    loadingMessage: 'Loading...',
    dataTable: {
        "dom": "t<'row'<'col-sm-12 pull-right'p>>",
        "pageLength": 10,
        "ajax": {
            "url": $("#datatable-new").data('url')
        },
        "bStateSave": true,
        "order": [],
        columns: [
            {
                name: 'no',
                render: function (data, type, full, meta) {
                    return meta.settings._iDisplayStart + meta.row + 1;
                }
            },
            {data: 'no_b', name: 'no_b'},
            {data: 'consigner', name: 'consigner'},
            {data: 'cont_no', name: 'cont_no'},
            {data: 'carrier', name: 'carrier'},
            {data: 'tour', name: 'tour'},
            {data: 'timeline', name: 'time', render: function(data){
                return moment(data).format("MM-DD-YYYY ");
            }},                
            {data: 'item_out', name: 'item_out', render: function(data){
                return moment(data).format("MM-DD-YYYY ");
            }},                
            {data: 'actions', name: 'actions', orderable: false, searchable: false},
            {data: 'manifest_id'}
        ],
        columnDefs: [
              {
                targets: 9,
                className: 'hide_column'
              }
        ],
        "pagingType": "bootstrap_full_number",
    }
});
},500);

$('.filter-new-no_b').keyup( function(){
  var table2 = $("#datatable-new").DataTable();
    table2.column( 1 )
      .search( $(this).val() )
      .draw();

 });
 $('.filter-new-consigner').keyup( function(){
  var table2 = $("#datatable-new").DataTable();
    table2.column( 2 )
      .search( $(this).val() )
      .draw();

});
$('.filter-new-cont_no').keyup( function(){
  var table2 = $("#datatable-new").DataTable();
    table2.column( 3 )
      .search( $(this).val() )
      .draw();

});
$('.filter-new-carrier').keyup( function(){
  var table2 = $("#datatable-new").DataTable();
    table2.column( 4 )
      .search( $(this).val() )
      .draw();

});
$('.filter-new-tour').keyup( function(){
  var table2 = $("#datatable-new").DataTable();
    table2.column( 5 )
      .search( $(this).val() )
      .draw();

});
 $('.filter-new-timeline').keyup( function(){
  var table2 = $("#datatable-new").DataTable();
    table2.column( 6 )
      .search( $(this).val() )
      .draw();

});     
 $('.filter-new-item_out').keyup( function(){
  var table2 = $("#datatable-new").DataTable();
    table2.column( 7 )
      .search( $(this).val() )
      .draw();

});

manifest.js（完整的数据表）

setTimeout(function(){ 

new Datatable().init({
    src: $("#datatable-completed"),
    loadingMessage: 'Loading...',
    dataTable: {
        "dom": "t<'row'<'col-sm-12 pull-right'p>>",
        "pageLength": 10,
        "ajax": {
            "url": $("#datatable-completed").data('url')
        },
        "bStateSave": true,
        "order": [],
        columns: [
            {
                name: 'no',
                render: function (data, type, full, meta) {
                    return meta.settings._iDisplayStart + meta.row + 1;
                }
            },
            {data: 'no_b', name: 'no_b'},
            {data: 'consigner', name: 'consigner'},
            {data: 'cont_no', name: 'cont_no'},
            {data: 'carrier', name: 'carrier'},
            {data: 'tour', name: 'tour'},
            {data: 'timeline', name: 'timeline', render: function(data){
                return moment(data).format("MM-DD-YYYY ");
            }},
            {data: 'actions', name: 'actions', orderable: false, searchable: false}
        ],
        "pagingType": "bootstrap_full_number",
    }
});

},500);  

$('.filter-completed-no_b').keyup( function(){
  var table2 = $("#datatable-completed").DataTable();
    table2.column( 1 )
      .search( $(this).val() )
      .draw();

});
$('.filter-completed-consigner').keyup( function(){
  var table2 = $("#datatable-completed").DataTable();
    table2.column( 2 )
      .search( $(this).val() )
      .draw();

});
$('.filter-completed-cont_no').keyup( function(){
  var table2 = $("#datatable-completed").DataTable();
    table2.column( 3 )
      .search( $(this).val() )
      .draw();

});
$('.filter-completed-carrier').keyup( function(){
  var table2 = $("#datatable-completed").DataTable();
    table2.column( 4 )
      .search( $(this).val() )
      .draw();

});
$('.filter-completed-tour').keyup( function(){
  var table2 = $("#datatable-completed").DataTable();
    table2.column( 5 )
      .search( $(this).val() )
      .draw();

});
 $('.filter-completed-timeline').keyup( function(){
  var table2 = $("#datatable-completed").DataTable();
    table2.column( 6 )
      .search( $(this).val() )
      .draw();

});

我没有放置另外两个数据表的代码，因为它们几乎相同。

Answer 1

您可以尝试使用 localstorage setItem和getItem来存储您当前的过滤器。

当页面重新加载或您返回该页面时。

您可以使用上次使用 getItems 设置的过滤器。