DataTables刷新时部分浏览器输入框内容不显示但过滤状态残留问题求助

Hey there, let's tackle this DataTables filtering issue you're facing. The root cause here is that you've enabled stateSave: true, so DataTables persists your filtering state across page reloads—but your header/footer input boxes aren't being repopulated with the saved filter values when the page loads. That's why it looks like the inputs are empty, but the filter is still active. Here are two solid solutions matching your ideas:

Solution 1: Restore Filter Values to Input Boxes on Page Load #

When the table initializes, we can fetch the saved state from DataTables and populate the header/footer inputs with the corresponding column filter values. Add this code right after your table initialization:

// After your table = $('#DT-GRvWJTAH').DataTable({ ... });
var state = table.state.loaded();
if (state) {
  // Restore header filter inputs
  table.columns().eq(0).each(function(colIdx) {
    var searchVal = state.columns[colIdx].search.search;
    if (searchVal) {
      $('input', table.column(colIdx).header()).val(searchVal);
    }
  });
  // Restore footer filter inputs
  table.columns().every(function(colIdx) {
    var searchVal = state.columns[colIdx].search.search;
    if (searchVal) {
      $('input', this.footer()).val(searchVal);
    }
  });
}

This checks if there's a saved state, then loops through each column to set the input value to the saved search term. Now when you reload, the inputs will show the active filter, matching the actual table state.

Solution 2: Clear All Filter State on Page Reload #

If you'd prefer to reset all filters when the page refreshes, you have two options:

Option 2a: Disable stateSave entirely

Simply change stateSave: true to stateSave: false in your DataTables configuration. This stops DataTables from saving any state (filters, sorting, column order, etc.) across reloads.

Option 2b: Keep stateSave but clear only filter states

If you want to preserve other saved state (like custom column order from colReorder), use the stateLoadCallback to modify the loaded state and clear column searches:

var table = $('#DT-GRvWJTAH').DataTable({
  // ... your existing config ...
  stateSave: true,
  stateLoadCallback: function(settings, callback) {
    var state = $.fn.dataTable.state.loaded();
    if (state) {
      // Clear all column search states
      state.columns.forEach(function(col) {
        col.search.search = '';
        col.search.replace = false;
      });
      // Clear global search too (optional)
      state.search.search = '';
      state.search.replace = false;
    }
    callback(state);
  }
});

This intercepts the loaded state, clears all column and global search values, then passes the modified state to DataTables. The table will load without any active filters while retaining other saved preferences.

Quick side note: You have a typo in your configuration—"procesing" should be "processing" (missing an 's'). Fixing that will ensure proper loading state behavior.

内容的提问来源于stack exchange，提问作者MadBoy