具有选择标签的dataTables列过滤插件 [英] dataTables Column Filtering Plugin with Select Tags

问题描述

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

I'm using datatables v1.92 along with the column filtering plugin 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

This is because the values coming from the database are 1, 2, or 3. The label displayed to the user is either Abc, Def, or Ghi

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

Using the column filtering plugin, I'm able to create a dropdown for a column using

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

问题在于该下拉菜单的标记为

The problem is that the markup of that dropdown turns out to be

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

因此，将用户显示为1, 2, 3作为下拉标签，而不是Abc, Def, Ghi

So the user is shown 1, 2, 3 as the drop down labels instead of Abc, Def, Ghi

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

I tried to hardcode the dropdown in the <tfoot> section of the datatable, but then

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

覆盖硬编码的下拉菜单.我什至尝试将null作为aoColumns的参数传递，但由于它只是删除了硬编码的下拉菜单，因此也没有用.

overwrites the hardcoded dropdown. I even tried passing null as the parameter for aoColumns but that didn't work too as it simply removed the hardcoded dropdown.

那么，有没有一种方法可以创建一个下拉菜单，其中value属性将保留一个数值，而<option>和</option>之间的标签将是文本?

So is there a way that I can create the dropdown in which the value attribute will hold a numerical value whereas the label between <option> and </option> will be text?

推荐答案

我不确定您是否已解决此问题，但是在dataTables插件站点上，我看不到解决您所要求的方法.

I'm not sure if you have solved this yet but looking at the dataTables plugin site I can't see a way around doing what you have asked.

但是要解决此问题，您可以先创建<select>菜单，然后使用fnFilter回调函数以特定的标签更新列.

But for a workaround you can create the <select> menu before hand and then using the fnFilter callback to update your column with a specific vale.

例如

<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进行过滤.

The above will then filter the table by the value of your <option> tags, e.g. 1. But if you're looking at filtering by the ABC enclosed in the <option> tag.

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

希望这对您有所帮助.

Hope this was of some help.

这篇关于具有选择标签的dataTables列过滤插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！