如何将DataTables中Name列的下拉筛选框转为复选框？

问题回顾 #

需要实现：用户必须先选择Name，才能操作其他下拉筛选框；同时将Name列的下拉筛选改为复选框，保留原有筛选功能。

修改后的完整代码 #

HTML 代码 #

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <meta charset=utf-8 />
    <title>DataTables 自定义筛选</title>
  </head>
  <body>
    <div class="searchbox" id="table-filter">
      <p>
        <label>Name:</label> 
        <span id="dropdown1"></span>
      </p>
      <p>
        <label>Position:</label> 
        <span id="dropdown2"></span>
      </p>
      <p>
        <label>Office:</label> 
        <span id="dropdown3"></span>
      </p>
      <button type="button" id="test">Clear Filters</button>
    </div>
    <div id="table-wrap" style="display:none;">
      <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style="width: 100%; padding-top: 10px;">
        <thead>
          <tr>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th colspan="3" style="text-align: center;">Information</th>
          </tr>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

JavaScript 代码 #

$(document).ready(function() {
  $('#table-wrap').hide();
  var table = $('#example').DataTable({
    responsive: true,
    stateSave: false,
    searching: true
  });

  buildSelect(table);
  // 初始状态禁用Position和Office筛选框
  toggleOtherFilters(false);

  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
    $('#table-wrap').hide();
    // 清空Name复选框并重新禁用其他筛选
    $('#dropdown1 input[type="checkbox"]').prop('checked', false);
    toggleOtherFilters(false);
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, { search: 'applied' });
    counter++;
    var container = $('#dropdown' + counter).empty();

    // 第一列(Name)生成复选框组
    if (counter === 1) {
      // 添加全选选项
      $('<label><input type="checkbox" class="select-all"> 全选</label>').appendTo(container);
      container.append('<br>');
      // 遍历生成每个Name的复选框
      column.data().unique().sort().each(function(d, j) {
        const checkbox = $(`<label><input type="checkbox" class="name-checkbox" value="${d}"> ${d}</label>`)
          .appendTo(container)
          .on('change', function() {
            updateNameFilter(table);
            // 根据选中状态切换其他筛选框可用性
            const hasSelected = $('#dropdown1 .name-checkbox:checked').length > 0;
            toggleOtherFilters(hasSelected);
            $('#table-wrap').show();
            table.columns.adjust();
          });
        // 恢复之前的选中状态
        const currSearch = column.search();
        if (currSearch && d.match(new RegExp(currSearch))) {
          checkbox.find('input').prop('checked', true);
        }
      });
      // 全选/取消全选逻辑
      $('.select-all').on('change', function() {
        $('.name-checkbox').prop('checked', $(this).prop('checked'));
        updateNameFilter(table);
        toggleOtherFilters($(this).prop('checked'));
        $('#table-wrap').show();
        table.columns.adjust();
      });
    } else {
      // 其他列保留下拉框，初始禁用
      const select = $(`<select id="dd${counter}" disabled><option value="">Select</option></select>`)
        .appendTo(container)
        .on('change', function() {
          const val = $.fn.dataTable.util.escapeRegex($(this).val());
          column.search(val ? `^${val}$` : '', true, false).draw();
          $('#table-wrap').show();
          table.columns.adjust();
        });
      // 填充下拉选项
      column.data().unique().sort().each(function(d, j) {
        select.append(`<option value="${d}">${d}</option>`);
      });
      // 恢复之前的选中状态
      const currSearch = column.search();
      if (currSearch) {
        select.val(column.data().unique().toArray().find(e => e.match(new RegExp(currSearch))));
      }
    }
  });
}

// 更新Name列的筛选条件，支持多选
function updateNameFilter(table) {
  const selectedNames = $('.name-checkbox:checked').map(function() {
    return $(this).val();
  }).get();
  const searchVal = selectedNames.length > 0 ? `^(${selectedNames.join('|')})$` : '';
  table.column(0).search(searchVal, true, false).draw();
}

// 切换Position和Office筛选框的启用/禁用状态
function toggleOtherFilters(enabled) {
  $('#dd2, #dd3').prop('disabled', !enabled);
}

核心实现点 #

1. Name列转复选框：在buildSelect函数中判断当前为第一列时，生成包含全选选项的复选框组，同时保留筛选状态的恢复逻辑。
2. 筛选依赖控制：初始化时禁用Position和Office的下拉框，当用户选中任意Name复选框后自动启用；清空筛选时重新禁用。
3. 多值筛选支持：通过正则表达式实现多个Name的同时筛选，符合DataTables的筛选规则。

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