Question

I am using a custom filter by using external form, like in this link. However, I can’t create my custom filter field even I try adding similar code to the index.html page.

here is my additional filter column:

<div id="renderingEngineFilter" class="filterOption"></div>
<div id="browserFilter" class="filterOption"></div>
<div id="platformsFilter" class="filterOption"></div>
<div id="engineVersionFilter" class="filterOption range"></div>
<div id="cssGradeFilter" class="filterOption"></div>
<div id="customFilter"></div> <!-- this one -->

and I add it to my jQuery function like this:

$(document).ready( function () {
    $('#example').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    })
    .columnFilter({
        aoColumns: [
            { type:"select", sSelector: "#renderingEngineFilter" },
            { sSelector: "#browserFilter" },
            { sSelector: "#platformsFilter" },
            { type:"number-range", sSelector: "#engineVersionFilter" },
            { type:"select", values : ["A", "B", "C", "X"], sSelector: "#cssGradeFilter" },
            { type:"select", values : ["vannkorn", "ravy", "rayuth"], sSelector: "#customFilter"}    //here is where I add it
        ]
    });
});

Unfortunately, It does not show this custom field. Please help.

Answer 1

This is because your table, I am sure only has 5 columns and so you cannot apply a sixth filter there. If you look closely you can see that the columnFilter is done at aoColumns