如何为DataTables各列添加空数据排除切换复选框？

以下是可直接落地的实现方案：

1. 给表头添加复选框 #

在DataTables的表头中，为需要该功能的列搭配“排除空结果”复选框，可和列搜索框放在一起：

<thead>
  <tr>
    <th>
      姓名
      <input type="text" class="column-search" data-column="0" placeholder="搜索姓名">
      <label><input type="checkbox" class="exclude-empty" data-column="0"> 排除空结果</label>
    </th>
    <th>
      手机号码
      <input type="text" class="column-search" data-column="1" placeholder="搜索手机号">
      <label><input type="checkbox" class="exclude-empty" data-column="1"> 排除空结果</label>
    </th>
    <!-- 其他列按此格式添加 -->
  </tr>
</thead>

2. 初始化表格并绑定事件逻辑 #

初始化时记录各列的原始搜索值，确保取消复选框后能恢复之前的搜索状态：

// 初始化DataTables实例
const table = $('#your-table-id').DataTable();

// 缓存各列的用户搜索输入，默认是空字符串
const columnSearchCache = {};

// 列搜索框的输入事件处理
$('.column-search').on('keyup', function() {
  const columnIdx = $(this).data('column');
  const searchVal = $(this).val();
  columnSearchCache[columnIdx] = searchVal;
  table.column(columnIdx).search(searchVal).draw();
});

// 排除空结果复选框的切换事件处理
$('.exclude-empty').on('change', function() {
  const columnIdx = $(this).data('column');
  const isChecked = $(this).prop('checked');
  
  if (isChecked) {
    // 勾选时先缓存当前搜索值，再用正则过滤空白行
    columnSearchCache[columnIdx] = table.column(columnIdx).search();
    // ^\s*$ 匹配全空白内容，最后一个true表示取反（排除匹配项）
    table.column(columnIdx).search('^\\s*$', true, false, true).draw();
  } else {
    // 取消勾选时恢复之前的搜索值
    const originalSearch = columnSearchCache[columnIdx] || '';
    table.column(columnIdx).search(originalSearch).draw();
  }
});

补充：动态表头的处理方式 #

如果你的表格表头是动态生成的，可在initComplete回调里自动添加复选框：

initComplete: function() {
  this.api().columns().every(function() {
    const column = this;
    const header = $(column.header());
    header.append('<label style="margin-left:8px;"><input type="checkbox" class="exclude-empty" data-column="' + column.index() + '"> 排除空结果</label>');
  });
}

这样就能实现需求：勾选某列复选框时，过滤掉该列值为空（含全空格）的行；取消勾选后，自动恢复该列之前的搜索状态。

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