据我所知，DataTable的过滤器部分是一个插件，其简要说明如下：https://code.google.com/archive/p/jquery-datatables-column-filter/wikis/ColumnFilter.wiki

我想要完成的是当用户过滤数据时，我希望过滤器下拉选项根据当前数据集中的可用内容进行更改 . 例如，如果我将“食物类型”过滤为“肉类”，我不希望在“食物”过滤器中看到蔬菜或水果，只有不同种类的肉 . 如果我在“食物类型”过滤器中选择“蔬菜”，那么我只会在“食物”过滤器中看到蔬菜，例如“土 beans ” .

具体要求：

  • 过滤器部分必须与表分开

  • 初始加载 - 在"food"过滤器中显示没有"food"选项

  • 一旦"Food type"选择更改 - 使用适用于该"food type"的选项更新"food"过滤器 . 可能使用"search:applied" . 如果"food type"设置为默认"all food"类型，则在"food"过滤器中显示"food" . 确保在选择"food"进行过滤时重绘表格 .
    选择"food"时

  • 不更新"food"过滤器列表，除非更改选定的"food"（如果尚未自动完成）

目前，过滤器似乎只在页面初始化时设置 . columnFilter选项允许为过滤器设置特定值，但我相信这只在页面加载时出现一次 . 以这种方式重新绘制过滤器的问题可能会保存用户对过滤器的选择 .

我能想到的另一种方法是每当更改过滤器选择时，在单独的JavaScript函数中更新过滤器选项列表 . 这将涉及使用此功能从过滤的数据集中解析数据：

table.on('search.dt', function() {
    //number of filtered rows
    console.log(table.rows( { filter : 'applied'} ).nodes().length);
    //filtered rows data as arrays
    console.log(table.rows( { filter : 'applied'} ).data());                                  
})

http://jsfiddle.net/h4wrmfx3/

我想知道是否有更好的方法来实现这一点，也许是使用内置的DataTables功能 .

javascript filter datatables