Datatables列筛选：如何在选择框中禁用/隐藏已过滤值

针对基于datatables.net的「Individual column searching (select inputs)」示例，修改代码实现下拉筛选框仅显示当前筛选结果中的有效选项，比如选择Tokyo后，Position下拉框仅显示对应职位。

核心实现思路 #

每次表格完成筛选/绘制后，重新生成目标列的下拉选项，仅保留当前可见行中的唯一值，同时恢复用户之前的选中状态。

修改后的完整代码 #

$(document).ready(function() {
  // 初始化DataTables表格
  var table = $('#example').DataTable({
    dom: 'lrtip', // 可根据需求调整布局
    columnDefs: [
      // 你的列配置，比如目标列的宽度、排序设置等
    ]
  });

  // 为需要添加筛选下拉框的列初始化（示例：第0列Office、第1列Position）
  initColumnFilter(table, 0);
  initColumnFilter(table, 1);

  // 监听表格绘制事件，每次筛选/分页后更新下拉选项
  table.on('draw', function() {
    updateColumnFilter(table, 0);
    updateColumnFilter(table, 1);
  });

  // 初始化列筛选下拉框
  function initColumnFilter(table, colIndex) {
    var column = table.column(colIndex);
    var footer = $(column.footer());
    
    // 创建下拉框并绑定筛选事件
    var select = $('<select><option value="">全部</option></select>')
      .appendTo(footer.empty())
      .on('change', function() {
        var searchVal = $.fn.dataTable.util.escapeRegex($(this).val());
        // 精确匹配筛选，可根据需求调整正则
        column.search(searchVal ? '^' + searchVal + '$' : '', true, false).draw();
      });

    // 首次加载时填充初始选项
    updateColumnFilter(table, colIndex);
  }

  // 更新下拉框选项：仅保留当前筛选结果中的唯一值
  function updateColumnFilter(table, colIndex) {
    var column = table.column(colIndex, { search: 'applied' });
    var select = $(column.footer()).find('select');
    // 获取当前可见列的唯一值并排序
    var validValues = column.data().unique().sort();

    // 清空现有选项，保留"全部"默认项
    select.empty().append('<option value="">全部</option>');

    // 添加所有有效选项
    validValues.each(function(val) {
      select.append($('<option>', {
        value: val,
        text: val
      }));
    });

    // 恢复之前的选中值（如果该值仍在有效选项中）
    var currentSearch = column.search();
    if (currentSearch) {
      var cleanVal = currentSearch.replace(/^\^|\$$/g, '');
      if (validValues.indexOf(cleanVal) !== -1) {
        select.val(cleanVal);
      }
    }
  }
});

关键细节说明 #

1. 获取筛选后的数据：使用table.column(colIndex, { search: 'applied' })获取已经应用了所有筛选条件后的列数据，确保拿到的是当前可见行的内容。
2. 唯一值处理：通过unique().sort()对列数据去重并排序，保证下拉选项简洁有序。
3. 选中状态保留：更新选项后恢复用户之前的选中值，避免筛选后下拉框状态重置。
4. 多列适配：如需为更多列添加该功能，只需重复调用initColumnFilter和在draw事件中调用updateColumnFilter即可。

可选：禁用无效选项而非重新生成 #

如果更倾向于保留所有选项但禁用无效值，可修改updateColumnFilter函数如下：

function updateColumnFilter(table, colIndex) {
  var column = table.column(colIndex, { search: 'applied' });
  var select = $(column.footer()).find('select');
  var validValues = column.data().unique().sort();

  // 遍历现有选项，禁用不在有效列表中的值
  select.find('option').each(function() {
    var optionVal = $(this).val();
    if (optionVal && validValues.indexOf(optionVal) === -1) {
      $(this).prop('disabled', true);
    } else {
      $(this).prop('disabled', false);
    }
  });
}

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