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

Question

我正在使用数据表 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>是文本？

score 3 · Accepted Answer

我不确定您是否已经解决了这个问题，但是查看 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); 
});

希望这会有所帮助。

score 0 · Accepted Answer

如果您正在使用jquery.dataTables.columnFilter.js，那么以下方法将适用于您：

而不是写：

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

写这个：

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

2 回答 2