Answers

• kthorngren Posts: 22,070Questions: 26Answers: 5,086

  August 2019

  Restoring the values of column search drop down lists is something you will need to do. See if this thread gets you started.

  Kevin
• georgeforster Posts: 21Questions: 9Answers: 1

  August 2019

  Thanks I tried the solution posted, however upon testing the stateLoadParams code triggers before the InitComplete code which is where the drop downs are populated.

  Here is my code

  <script>
  try
  {
      $(document).ready(function() 
          {
              var table = $('table.example')
                  .on
                  ( 'draw.dt', function () 
                      {
                           console.log( 'Redraw occurred at: ' + new Date().getTime() );
                           $(window).resize();
                      }
                  )
                  .DataTable
                  (
                      {
                          dom: 'lfrtBip',
                          searching: true,
                          ordering: false,
                          paging : true,
                          info : true,
                          stateSave : true,
                          buttons: 
                          [
                              {
                                  extend: 'csv',
                                  text:'Save as csv',
                                  filename: "FlightLog",
                                  exportOptions: 
                                  {
                                      stripHtml: false,
                                      columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                                  }
  
                              },
  
                              {
                                  extend: 'excel',
                                  text:'Save as xlsx',
                                  filename: "FlightLog",
                                  exportOptions: 
                                  {
                                      stripHtml: false,
                                      columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                                  }
  
                              },
                          
                              {
                                  extend: 'pdf',
                                  text:'Save as pdf',
                                  filename: "FlightLog",
                                  orientation: 'landscape',
                                  exportOptions: 
                                  {
                                      stripHtml: true,
                                      columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                                  }
  
                              },
                          
                              {
                                  extend: 'print',
                                  text:'Print Table',
                                  exportOptions: 
                                  {
                                      stripHtml: false,
                                      columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                                  },
                                  autoPrint: false
  
                              }                   
                          ],
  
                          initComplete: function () {
                              console.log( 'init completed');
                              this.api().columns([5, 6]).every( function () {
  
                                  var column = this;
  
                                  var select = $('<select style="font-size:inherit;"><option value="">All</option></select>')
                                      .appendTo( $(column.footer()).empty() )
                                      .on( 'change', function () {
                                          var val = $.fn.dataTable.util.escapeRegex(
                                              $(this).val()
                                          );
  
                                          column
                                              .search( val ? '^'+val+'$' : '', true, false )
                                              .draw();
                                      } ); 
  
                                  column.data().unique().sort().each( function ( d, j ) {
                                  var val = $('<div/>').html(d).text();
                                  select.append( '<option value="' + val + '">' + val + '</option>' );
  
                                  } );
  
                              } );
                          },      
  
                          // This section refreshes the filter when a page is reloaded
  
                          stateLoadParams: function(settings, data) 
                          {
  
                              for (i = 0; i < data.columns["length"]; i++) 
                              {
  
                                  var col_search_val = data.columns[i].search.search;
                                  
  
                                  if (col_search_val != "") 
                                  {
                                      console.log( 'Column: ' + i + " Filter " + col_search_val );
  
                                      $("input", $(".DataTable tfoot td")[i]).val(col_search_val);
  
                                  }
  
                              }
  
                          }
  
                      }
                  );                  
          } 
      );
  }
  catch(err) 
  {
      document.getElementById("JavascriptErrors").innerHTML = err.message;
  }
  
  </script>
  
• colin Posts: 15,240Questions: 1Answers: 2,599

  August 2019 Answer ✓

  Hi @georgeforster ,

  You can access the last state loaded inside initComplete with state.loaded() - so you can move your code into that function cleanly.

  Cheers,

  Colin