Datatable列多选过滤器选择后联动更新其余过滤器匹配唯一值方案问询

核心思路是利用DataTable的drawCallback回调（每次筛选、分页等操作触发表格重绘后执行），动态更新所有列过滤器的可选值，同时保留用户已选中的过滤条件。

实现代码 #

$(document).ready(function() {
  $('#example').DataTable({
    initComplete: function() {
      const tableApi = this.api();
      // 初始化所有列的下拉过滤器
      tableApi.columns().every(function() {
        const column = this;
        const select = $('<select class="mymsel" multiple="multiple"><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function() {
            const vals = $('option:selected', this).map(function(index, element) {
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');
            column.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false).draw();
          });
      });
      // 初始化select2
      $(".mymsel").select2();
    },
    // 新增drawCallback，每次表格重绘后更新过滤器选项
    drawCallback: function() {
      const tableApi = this.api();
      tableApi.columns().every(function(colIdx) {
        const column = this;
        const $select = $(column.footer()).find('.mymsel');
        // 保存当前列已选中的值，避免更新后丢失
        const selectedVals = $select.val() || [];
        // 清空现有选项
        $select.empty().append('<option value=""></option>');
        // 仅拉取当前筛选后可见行的该列数据，去重排序
        column.data({search: 'applied'}).unique().sort().each(function(d) {
          $select.append(`<option value="${d}">${d}</option>`);
        });
        // 重新设置回之前选中的值
        $select.val(selectedVals);
        // 刷新select2显示
        $select.trigger('change.select2');
      });
    }
  });
});

关键改动说明 #

• 新增drawCallback配置项，所有触发表格重绘的操作（筛选、分页、排序）执行完成后都会触发该回调
• 拉取列数据时传入{search: 'applied'}参数，只会返回当前筛选条件匹配的行数据，而非全表原始数据
• 更新选项前先保存当前列用户已选中的值，更新完成后再回填，不会丢失已设置的过滤条件
• 更新选项后调用trigger('change.select2')刷新select2组件的显示状态，避免选中值显示异常

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