dataTables Column Filtering Plugin with Select Tag

Question

I'm using datatables v1.92 along with the column filtering plugin v1.5.0.

THE PROBLEM

I need to create drodowns for individual column filtering whose markup will be

<option value="1">Abc</option>
<option value="2">Def</option>
<option value="3">Ghi</option>

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>

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

WHAT I TRIED

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

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

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.

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?

Answer 1

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.

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.

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

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.

Answer 2

If you are using jquery.dataTables.columnFilter.js, then the following approach will work for you:

instead of writing:

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

write this:

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