yadcf for DataTables如何让select2下拉框仅展示当前表格过滤后的值

yadcf for DataTables 原生支持 select2 下拉框选项适配当前表格过滤结果的功能，你需要的「筛选下拉框仅展示当前可见行对应字段值」的效果可以通过内置参数快速实现。

实现步骤 #

1. 前置依赖确认 #

确保你已经引入了以下必要资源：

• DataTables 核心库
• select2 核心库
• yadcf 核心库 + yadcf select2 适配文件

2. 核心参数配置 #

在对应列的 yadcf 过滤器配置中添加 update_data_on_columns_filters: true 即可开启该功能，该参数作用是：当其他列执行过滤操作后，自动刷新当前列的下拉选项，仅保留当前表格可见行的对应字段值，且默认自动去重。

完整配置示例 #

// 初始化DataTables实例
const dataTable = $('#yourTableId').DataTable({
  // 你的DataTables基础配置
  paging: true,
  ordering: true,
  searching: true
});

// 初始化yadcf过滤器
yadcf.init(dataTable, [
  // 第一列过滤器示例
  {
    column_number: 0,
    filter_type: 'select2',
    update_data_on_columns_filters: true,
    select_type_options: {
      width: '200px',
      placeholder: '请选择分类'
    }
  },
  // 第二列（标签列）过滤器示例
  {
    column_number: 1,
    filter_type: 'select2',
    // 核心配置：开启动态更新可见行选项
    update_data_on_columns_filters: true,
    // 可选配置：按字母顺序排序下拉选项
    sorted: true,
    // 可选配置：选项更新后保留之前选中的值
    preserve_selected_on_update: true,
    select_type_options: {
      width: '200px',
      placeholder: '请选择标签'
    }
  }
], {
  // 可选全局配置：所有列过滤器都默认开启动态更新选项
  // update_data_on_columns_filters: true
});

常见补充说明 #

• 如果需要所有 select2 过滤器都默认支持该效果，可以直接在 yadcf 初始化的第三个全局配置参数中添加 update_data_on_columns_filters: true，无需给每列单独配置
• 若需要自定义 select2 的交互样式、多选等能力，直接在 select_type_options 中添加官方 select2 支持的配置项即可

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