如何用jQuery DataTable外部DOM复选框实现行内复选框全选及样式修改

嘿，我来帮你搞定这个DataTable的全选功能！其实不用手动去遍历DOM行，DataTable自带的Select插件已经提供了很方便的API，咱们可以这样调整你的代码：

首先，先修正你DataTable初始化的小问题——初始化时应该传入配置对象，而不是函数，不然会报错：

// 修正后的初始化代码
var dtab = $("#example").DataTable({
  // 你的其他配置项
  columnDefs: [{ 
    orderable: false, 
    className: 'select-checkbox', 
    targets: 0 
  }],
  select: { 
    style: 'multi', 
    selector: 'td:first-child' 
  },
  dom: '<"chk">ftipr'
  // 更多配置
});

// 添加外部全选复选框
$("div.chk").html('<input id="cBox" type="checkbox"/>');

接下来，给外部的全选框绑定点击事件，利用DataTable的API来实现全选/取消全选，同时自动处理行的selected样式和复选框状态：

$("#cBox").click(function() {
  var isChecked = $(this).is(':checked');
  
  // 用DataTable API批量选中/取消所有行
  if (isChecked) {
    // 选中所有行，API会自动给行加上selected类，同时标记复选框为选中
    dtab.rows().select();
  } else {
    // 取消所有行的选中状态
    dtab.rows().deselect();
  }
});

如果你需要单独给行内的复选框添加selected类（而不是只依赖行的样式），可以监听表格的select和deselect事件，手动给复选框添加/移除样式：

// 行被选中时，给对应复选框加selected类
dtab.on('select', function(e, dt, type, indexes) {
  if (type === 'row') {
    // 获取选中行的DOM节点，找到复选框并添加类
    dt.rows(indexes).nodes().to$().find('.select-checkbox').addClass('selected');
  }
});

// 行被取消选中时，移除复选框的selected类
dtab.on('deselect', function(e, dt, type, indexes) {
  if (type === 'row') {
    dt.rows(indexes).nodes().to$().find('.select-checkbox').removeClass('selected');
  }
});

最后，别忘了同步全选框和表格的选中状态——当用户手动选中/取消部分行时，全选框要自动更新状态：

dtab.on('select deselect', function() {
  var totalRows = dtab.rows().count();
  var selectedRows = dtab.rows({ selected: true }).count();
  // 当所有行都被选中时，全选框勾选，否则取消
  $("#cBox").prop('checked', totalRows === selectedRows);
});

这样整个全选功能就完整了：点击外部复选框可以一键全选/取消，手动操作行时全选框状态同步，而且不管表格有没有分页，所有数据行都会被正确处理~

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