如何获取DataTable不同分页页面中所有选中复选框的唯一值？

DataTables分页时，非当前页的DOM元素会被临时移除，直接用常规jQuery选择器只能获取当前页的选中项，要实现跨分页获取所有选中ID（包括初始选中的），可以用以下两种方案：

方案一：自定义复选框+全局数组维护选中状态 #

适合未使用DataTables Select插件的场景，通过全局数组手动记录所有选中的ID：

步骤1：初始化收集初始选中ID #

页面加载时，先把默认选中的复选框ID存入全局数组：

let selectedIds = [];

// 初始化DataTables前收集初始选中项
$('.row-checkbox:checked').each(function() {
  selectedIds.push($(this).val());
});

// 初始化DataTables
const table = $('#myTable').DataTable({
  pageLength: 10, // 你的分页配置
  // 其他表格配置
});

步骤2：用事件委托监听复选框变化 #

由于分页会重新渲染DOM，必须用事件委托绑定复选框的change事件，更新全局数组：

$(document).on('change', '.row-checkbox', function() {
  const id = $(this).val();
  if ($(this).is(':checked')) {
    // 未在数组中则添加
    if (!selectedIds.includes(id)) {
      selectedIds.push(id);
    }
  } else {
    // 从数组中移除
    selectedIds = selectedIds.filter(item => item !== id);
  }
});

步骤3：按钮点击时输出选中ID #

点击按钮时直接读取全局数组即可：

$('#getChecked').on('click', function() {
  console.log('选中的ID：', selectedIds);
  // 展示到页面（示例）
  alert('选中的ID：' + selectedIds.join(', '));
});

可选：全选功能实现 #

如果需要全选/取消全选，同样要基于全局数组更新状态：

$('#selectAll').on('change', function() {
  const isChecked = $(this).is(':checked');
  // 遍历当前页所有复选框
  table.rows().nodes().to$().find('.row-checkbox').each(function() {
    const id = $(this).val();
    $(this).prop('checked', isChecked);
    // 更新全局数组
    if (isChecked) {
      if (!selectedIds.includes(id)) selectedIds.push(id);
    } else {
      selectedIds = selectedIds.filter(item => item !== id);
    }
  });
});

方案二：使用DataTables Select插件（更简洁） #

如果可以引入DataTables Select插件，利用插件自带的选中状态管理功能，无需手动维护数组：

步骤1：引入Select插件资源 #

确保页面引入了Select的JS和CSS文件（已集成则跳过）。

步骤2：初始化DataTables并配置Select #

指定复选框选择器，开启多选模式：

const table = $('#myTable').DataTable({
  select: {
    style: 'multi',
    selector: 'td:first-child input[type="checkbox"]' // 对应你的复选框选择器
  },
  pageLength: 10,
  // 其他配置
});

// 初始化时设置初始选中行（如果有默认选中项）
table.rows(function(idx, data, node) {
  return $(node).find('.row-checkbox').is(':checked');
}).select();

步骤3：按钮点击时获取选中ID #

通过DataTables API直接获取所有选中行的ID：

$('#getChecked').on('click', function() {
  // 假设ID是表格数据的第一列，根据你的实际数据结构调整
  const selectedIds = table.rows({selected: true}).data().map(row => row[0]);
  console.log('选中的ID：', selectedIds);
  alert('选中的ID：' + selectedIds.join(', '));
});

关键注意点 #

• 自定义方案必须用事件委托绑定复选框事件，否则分页后新渲染的行不会触发事件。
• 初始选中项一定要在DataTables初始化前收集，避免初始状态丢失。
• 使用Select插件时，确保选择器配置正确，对应到你的复选框元素。

内容的提问来源于stack exchange，提问作者Kung Fu Ninja