Datatables表格缓存刷新后Checkbox的stateSave失效（其他stateSave正常）

Hey there, let's work through this checkbox state save issue you're hitting with DataTables. I’ve dealt with similar quirks before, so here’s a step-by-step breakdown of solutions that should fix this:

1. Manually Extend State Save to Include Checkbox Selections #

The default DataTables stateSave doesn’t automatically capture the checkbox plugin’s selected states. We need to hook into the state save/load callbacks to add and retrieve this data ourselves.

Add this to your DataTables initialization code:

$('#your-table-id').DataTable({
  stateSave: true,
  select: {
    style: 'multi' // Required for multi-row checkbox selection
  },
  checkboxes: {
    selectRow: true
  },
  // Custom callback to save checkbox selections
  stateSaveCallback: function(settings, data) {
    // Get IDs of currently selected rows
    const selectedRowIds = this.api().rows({ selected: true }).ids().toArray();
    // Add checkbox selection data to the saved state
    data.checkboxSelected = selectedRowIds;
    // Save the updated state to localStorage
    localStorage.setItem(`DataTables_${settings.sInstance}`, JSON.stringify(data));
  },
  // Custom callback to load saved state
  stateLoadCallback: function(settings) {
    const savedState = JSON.parse(localStorage.getItem(`DataTables_${settings.sInstance}`));
    if (savedState?.checkboxSelected) {
      // Store the selected IDs temporarily to use after data loads
      this.api()._savedCheckboxIds = savedState.checkboxSelected;
    }
    return savedState;
  },
  // Restore selections once the table is fully initialized and data is loaded
  initComplete: function() {
    const api = this.api();
    if (api._savedCheckboxIds) {
      api.rows(api._savedCheckboxIds).select();
    }
  }
});

2. Ensure Timing is Correct for Data-Loaded Tables #

Since you’re populating the table via a real-time API call, the initComplete might fire before your data finishes loading. Add a drawCallback to handle selections after every table redraw (including post-API-load):

// Add this to your DataTables config
drawCallback: function() {
  const api = this.api();
  if (api._savedCheckboxIds && api.rows().count() > 0) {
    api.rows(api._savedCheckboxIds).select();
  }
}

3. Verify LocalStorage is Capturing the Data #

Double-check that your selections are being saved to localStorage. Open your browser’s dev tools (F12), go to the Application tab, and look for an entry named DataTables_your-table-id. Expand it to confirm the checkboxSelected array is present with your selected row IDs.

4. Confirm Plugin Dependencies Are Properly Loaded #

Make sure your plugin files are loaded in the correct order:

• First load jQuery
• Then DataTables core JS/CSS
• Then select plugin JS/CSS
• Finally jquery-datatables-checkboxes JS/CSS

This ensures the checkbox plugin can properly hook into DataTables’ select functionality, which is critical for state handling.

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