如何获取jQuery DataTables所有分页页面中选中复选框的值？

The problem with your current code is that DataTables only renders rows for the active page in the DOM. When you switch pages, previous rows are removed from the DOM, so your selector can’t access checkboxes from non-visible pages. Here’s a reliable way to track selections across all pages:

Approach 1: Manual Selection Tracking (Best for deferRender: true) #

We’ll maintain a set of selected IDs that stays in sync with checkbox toggles, regardless of pagination.

Step 1: Initialize a Set to Track Selected IDs #

Add this before your DataTables initialization:

// Use a Set to avoid duplicate IDs
let selectedIds = new Set();

Step 2: Update Checkbox Rendering to Reflect Selection State #

Modify the render function in your columns definition to set the checked state based on the set:

"render": function(data, type, full) {
  // Check if the ID is already in our selected set
  const checkedState = selectedIds.has(data.ID) ? 'checked' : '';
  // Add a class for easier event delegation
  return `<input type="checkbox" class="row-checkbox" value="${data.ID}" ${checkedState} />`;
}

Step 3: Add Event Listener to Sync Checkbox Changes with the Set #

Use event delegation to handle checkbox changes (works even for dynamically rendered rows):

// Listen for checkbox changes on the table
$('#example').on('change', '.row-checkbox', function() {
  const rowId = $(this).val();
  if (this.checked) {
    selectedIds.add(rowId);
  } else {
    selectedIds.delete(rowId);
  }
});

Step 4: Retrieve All Selected IDs #

Whenever you need the full list of selected IDs, convert the Set to an array:

const allSelected = Array.from(selectedIds);
console.log(allSelected); // This includes IDs from all pages

Alternative Approach (Without Manual Tracking, if deferRender is disabled) #

If you’re not using deferRender, you can iterate through every row in the DataTable using its API to check checkbox states:

const table = $('#example').DataTable();
const selectedIds = [];

table.rows().every(function() {
  const rowData = this.data();
  const checkbox = $(this.node()).find('input[type=checkbox]');
  if (checkbox.is(':checked')) {
    selectedIds.push(rowData.ID);
  }
});

console.log(selectedIds);

Note: This won’t work with deferRender: true because non-visible rows aren’t rendered in the DOM, so their checkboxes don’t exist yet.

Bonus: "Select All" Checkbox Across All Pages #

If you want a global "Select All" toggle:

<!-- Add this above your table -->
<input type="checkbox" id="select-all"> Select All

$('#select-all').on('change', function() {
  const table = $('#example').DataTable();
  const allIds = table.rows().data().map(row => row.ID).toArray();
  
  if (this.checked) {
    allIds.forEach(id => selectedIds.add(id));
  } else {
    selectedIds.clear();
  }
  
  // Refresh the table to update checkbox states without changing pages
  table.draw(false);
});

This way, your selection state persists across pagination, and you can always get the full list of selected IDs from the selectedIds Set.

内容的提问来源于stack exchange，提问作者Juan Pinzón