title: How to retain filter after clicking back or refresh page
body: <p>currently I am handling maintenance on a laravel project. I want to retain filter after clicking refresh or going back from another page.</p>
  <p>There are 4 datatable which are New, Complete, Cargo, and Hold. Each with its own purpose to display data.</p>
  <p>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.</p>
  <p>All 4 code are pretty much the same.</p>
  <p>At first I try history.back() before I found out about statesave.</p>
  <p>I check the statesave and it is enable for all 4.</p>
  <p>manifest.js(datatable for New)</p>
  <pre><code>setTimeout(function(){ 
  
  new Datatable().init({
      src: $(&quot;#datatable-new&quot;),
      loadingMessage: 'Loading...',
      dataTable: {
          &quot;dom&quot;: &quot;t&lt;'row'&lt;'col-sm-12 pull-right'p&gt;&gt;&quot;,
          &quot;pageLength&quot;: 10,
          &quot;ajax&quot;: {
              &quot;url&quot;: $(&quot;#datatable-new&quot;).data('url')
          },
          &quot;bStateSave&quot;: true,
          &quot;order&quot;: [],
          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(&quot;MM-DD-YYYY &quot;);
              }},                
              {data: 'item_out', name: 'item_out', render: function(data){
                  return moment(data).format(&quot;MM-DD-YYYY &quot;);
              }},                
              {data: 'actions', name: 'actions', orderable: false, searchable: false},
              {data: 'manifest_id'}
          ],
          columnDefs: [
                {
                  targets: 9,
                  className: 'hide_column'
                }
          ],
          &quot;pagingType&quot;: &quot;bootstrap_full_number&quot;,
      }
  });
  },500);
  
  $('.filter-new-no_b').keyup( function(){
    var table2 = $(&quot;#datatable-new&quot;).DataTable();
      table2.column( 1 )
        .search( $(this).val() )
        .draw();
  
   });
   $('.filter-new-consigner').keyup( function(){
    var table2 = $(&quot;#datatable-new&quot;).DataTable();
      table2.column( 2 )
        .search( $(this).val() )
        .draw();
  
  });
  $('.filter-new-cont_no').keyup( function(){
    var table2 = $(&quot;#datatable-new&quot;).DataTable();
      table2.column( 3 )
        .search( $(this).val() )
        .draw();
  
  });
  $('.filter-new-carrier').keyup( function(){
    var table2 = $(&quot;#datatable-new&quot;).DataTable();
      table2.column( 4 )
        .search( $(this).val() )
        .draw();
  
  });
  $('.filter-new-tour').keyup( function(){
    var table2 = $(&quot;#datatable-new&quot;).DataTable();
      table2.column( 5 )
        .search( $(this).val() )
        .draw();
  
  });
   $('.filter-new-timeline').keyup( function(){
    var table2 = $(&quot;#datatable-new&quot;).DataTable();
      table2.column( 6 )
        .search( $(this).val() )
        .draw();
  
  });     
   $('.filter-new-item_out').keyup( function(){
    var table2 = $(&quot;#datatable-new&quot;).DataTable();
      table2.column( 7 )
        .search( $(this).val() )
        .draw();
  
  });
  </code></pre>
  <p>manifest.js(datatable for Complete)</p>
  <pre><code>setTimeout(function(){ 
  
  new Datatable().init({
      src: $(&quot;#datatable-completed&quot;),
      loadingMessage: 'Loading...',
      dataTable: {
          &quot;dom&quot;: &quot;t&lt;'row'&lt;'col-sm-12 pull-right'p&gt;&gt;&quot;,
          &quot;pageLength&quot;: 10,
          &quot;ajax&quot;: {
              &quot;url&quot;: $(&quot;#datatable-completed&quot;).data('url')
          },
          &quot;bStateSave&quot;: true,
          &quot;order&quot;: [],
          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(&quot;MM-DD-YYYY &quot;);
              }},
              {data: 'actions', name: 'actions', orderable: false, searchable: false}
          ],
          &quot;pagingType&quot;: &quot;bootstrap_full_number&quot;,
      }
  });
  
  },500);  
  
  $('.filter-completed-no_b').keyup( function(){
    var table2 = $(&quot;#datatable-completed&quot;).DataTable();
      table2.column( 1 )
        .search( $(this).val() )
        .draw();
  
  });
  $('.filter-completed-consigner').keyup( function(){
    var table2 = $(&quot;#datatable-completed&quot;).DataTable();
      table2.column( 2 )
        .search( $(this).val() )
        .draw();
  
  });
  $('.filter-completed-cont_no').keyup( function(){
    var table2 = $(&quot;#datatable-completed&quot;).DataTable();
      table2.column( 3 )
        .search( $(this).val() )
        .draw();
  
  });
  $('.filter-completed-carrier').keyup( function(){
    var table2 = $(&quot;#datatable-completed&quot;).DataTable();
      table2.column( 4 )
        .search( $(this).val() )
        .draw();
  
  });
  $('.filter-completed-tour').keyup( function(){
    var table2 = $(&quot;#datatable-completed&quot;).DataTable();
      table2.column( 5 )
        .search( $(this).val() )
        .draw();
  
  });
   $('.filter-completed-timeline').keyup( function(){
    var table2 = $(&quot;#datatable-completed&quot;).DataTable();
      table2.column( 6 )
        .search( $(this).val() )
        .draw();
  
  });
  </code></pre>
  <p>I did not put the code for another two datatable as it pretty much the same.</p>