Dropdown to filter by hidden column

sasgra

I want to place a dropdown menu above the table which will allows the user to filter the table by values in a hidden column0. How can I accomplish this?

I'm loading data using javascript:

var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'];

And adding column headers using:

  "columns": [
        { "title": "Thing" },
        { "title": "Browser" },
        { "title": "OS" },
        { "title": "Version", "class": "center" },
        { "title": "Grade", "class": "center" }

daniel_r

You can use my yadcf plugin for that

If you use the new Datatables api (capital "D") and you want to use dropdown filter for the first column this is the code you need to use , (hide your column with visible: false for example)

yadcf.init(oTable, [{
        column_number: 0,
    filter_container_id: 'some_id_of_external_filter_container_element'
    }]);

see the showcase: http://yadcf-showcase.appspot.com/ and use the latest version of yadcf..

sasgra

Cheers daniel_r!

I solved it like this:

<select id="area">
<option value="0">Choose</option>
<option value="Trident">Trident</option>
</select>

$('select#area').on('change', function () {
var selectedValue = $(this).val();
var oSettings = oTable.fnSettings();
//flush filters
if (selectedValue === 0) {
for (iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
oSettings.aoPreSearchCols[iCol].sSearch = '';
}
oSettings.oPreviousSearch.sSearch = '';
oTable.fnDraw();
} else {

           oTable.fnFilter("^" + selectedValue + "$", 0, true);

       }
   });