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

Question

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

问题

我需要为其标记为

的单个列过滤创建drodowns

<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回调来更新具有特定值的列。

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。但是，如果您正在查看<option>标记中包含的ABC过滤。

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

希望这有一些帮助。

Answer 2

如果您使用的是jquery.dataTables.columnFilter.js，则以下方法将为您工作：

代替写作：

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

这样写：

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