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

Question

currently I am handling maintenance on a laravel project. I want to retain filter after clicking refresh or going back from another page.

There are 4 datatable which are New, Complete, Cargo, and Hold. Each with its own purpose to display data.

I try to filter datatable on New but once I refresh the page or go to another page and click back, it reloads and shows all the data in the table. As for another 3, I try all 3 and it can retain the filter. Only datatable in New cannot retain the filter.

All 4 code are pretty much the same.

At first I try history.back() before I found out about statesave.

I check the statesave and it is enable for all 4.

manifest.js(datatable for New)

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(datatable for Complete)

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();

});

I did not put the code for another two datatable as it pretty much the same.

Answer 1

you can try localstorage setItem and getItem to store your current filters.

When page reloads or u came back to that page.

You can use your last filters you set by using getItems.