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

我正在使用数据表 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> and </option>会是文字吗？

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

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

E.g

<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。但是，如果您正在考虑按 ABC 中包含的过滤<option> tag.

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

希望这对您有所帮助。