带有选择标签的 dataTables 列过滤插件

Posted 2023-05-08

【中文标题】带有选择标签的 dataTables 列过滤插件

【英文标题】：dataTables Column Filtering Plugin with Select Tags

【发布时间】：2012-12-11 22:44:23

【问题描述】：

我正在使用数据表 v1.92 以及列过滤插件 v1.5.0。

问题

我需要为单个列过滤创建下拉列表，其标记将是

<option value="1">Abc</option>
<option value="2">Def</option>
<option value="3">Ghi</option>

这是因为来自数据库的值是1, 2, or 3。显示给用户的标签是Abc, Def, or Ghi

使用列过滤插件，我可以为列创建下拉列表

.columnFilter(
    aoColumns: [ type : 'select', values:['1', '2', '3']
               ]
         );

问题是该下拉菜单的标记结果是

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

所以用户显示为1, 2, 3 作为下拉标签而不是Abc, Def, Ghi

我尝试了什么

我尝试在数据表的<tfoot> 部分中对下拉列表进行硬编码，但随后

.columnFilter(
    aoColumns: [ type : 'select', values:['1', '2', '3']
                   ]
             );

覆盖硬编码的下拉菜单。我什至尝试将null 作为aoColumns 的参数传递，但这也不起作用，因为它只是删除了硬编码的下拉列表。

那么有没有一种方法可以创建下拉列表，其中value 属性将包含一个数值，而<option> 和</option> 之间的标签将是文本？

【参考方案1】：

我不确定您是否已经解决了这个问题，但是查看 dataTables 插件站点，我找不到解决您所要求的方法的方法。

但对于解决方法，您可以事先创建<select> 菜单，然后使用fnFilter 回调来使用特定值更新您的列。

例如

<select>
   <option value="1">ABC</option>
   <option value="2">DEF</option>
   <option value="3">GHI</option>
</select>

-

$('select').change(function()
    yourTable.fnFilter($(this).val(),colNum);
    // With colNum being the targeted column.  
);

然后上面将根据您的 <option> 标签的值过滤表格，例如1。但是，如果您正在查看包含在 <option> 标记中的 ABC 过滤。

$('select').change(function()
   yourTable.fnFilter($('select option:selected').text(),colNum); 
);

希望这对您有所帮助。

【参考方案2】：

如果您使用的是jquery.dataTables.columnFilter.js，那么以下方法将适合您：

而不是写：

type : 'select', values:['1', '2', '3']

写这个：

"type": "select", values: [ label: "ABC", value: "1" ,  label: "DEF", value: "2" ]