如何获取并提交带复选框值的jQuery DataTables记录

这个问题我之前也碰到过，DataTables的rows().data()确实只会返回表格初始化时绑定的原始数据源，不会自动同步DOM里复选框的实时选中状态。给你几个实用的解决办法：

方法一：手动遍历行，合并复选框状态到数据中 #

这是最通用的方式，不管你的复选框是怎么渲染的，都能实时获取状态：

// 获取所有行的原始数据
const allRecords = table.rows().data().toArray();

// 遍历每一行，把复选框状态合并到对应的数据对象里
table.rows().every(function(rowIndex) {
  // 找到当前行的复选框元素
  const checkboxEl = $(this.node()).find('input[type="checkbox"]')[0];
  // 给数据对象添加一个字段（比如isChecked）来存储选中状态
  allRecords[rowIndex].isChecked = checkboxEl?.checked || false;
});

// 现在allRecords里就包含每条记录的复选框选中状态了
console.log(allRecords);

方法二：利用DataTables的回调同步状态（适合动态渲染的复选框） #

如果你的复选框是通过DataTables的columnDefs.render方法渲染的，可以在复选框的change事件里，直接把选中状态更新到对应行的DataTables数据中：

// 初始化表格时给复选框列加渲染逻辑
const table = $('#yourTable').DataTable({
  columnDefs: [
    {
      targets: 0, // 假设复选框在第1列
      render: function(data, type, row) {
        return `<input type="checkbox" ${row.isChecked ? 'checked' : ''} class="row-checkbox">`;
      }
    }
  ]
});

// 监听复选框的change事件，实时更新DataTables里的数据
$('#yourTable').on('change', '.row-checkbox', function() {
  const $row = $(this).closest('tr');
  const rowData = table.row($row).data();
  // 直接更新数据对象里的状态
  rowData.isChecked = this.checked;
});

// 之后调用table.rows().data().toArray()就能拿到带状态的数据了

额外提示：如果只需要获取选中的记录 #

如果你不需要所有记录，只需要拿到被选中的那些，可以直接用DataTables的选择扩展（Select Extension）：

// 先确保你引入了Select扩展
const selectedRecords = table.rows({ selected: true }).data().toArray();

注意：如果你的表格开启了服务器端分页，上面的方法只会获取当前页的记录，要处理全页数据的话需要额外的逻辑哦。

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