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>会是文字吗？

Answer 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); 
});

希望这对您有所帮助。