Column Filtering using dataTable not woking

Question

Here below i have an array of values (testdata) which is given to dataTable .

Now i want to add column filtering to the datatable. I have used following code.

 //USING DATATABLE /// $.get( '/index.php/async/getDispatchDetails/'+data,function( data ) { var testdata =data.dispatchdata; console.log(testdata); console.log(typeof (testdata)); var testdata = $.map(testdata, function(value, index) { return [value]; }); console.log(testdata); //USING DATATABLE /// $('#dispatchDetailTable').dataTable({ "aaData": testdata, "aoColumns": [{ "mDataProp": "dispatchid" }, { "mDataProp": "itemname" }, { "mDataProp": "quantity" }, { "mDataProp": "weight" }, { "mDataProp": "accountname" }] }).columnFilter({ aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, { type: "text" }, null, { type: "number" }, { type: "select" } ] }); });

 <!-- Table --> <table id="dispatchDetailTable" class="table table-striped"> <thead> <tr> <!-- <th>Sr.Nos</th> --> <th>Id</th> <th>Item</th> <th>Qty</th> <th>Kg</th> <th>Account</th> </tr> </thead> <tbody> </tbody> <tfoot></tfoot> </table>

The Console shows following error :

Uncaught TypeError: $(...).dataTable(...).columnFilter is not a function

Answer 1

Uncaught TypeError: $(...).dataTable(...).columnFilter is not a function

This is because column filtering a separate plugin and you might not included it.

You can also use fnFilter() like this:

$('#dispatchDetailTable').dataTable({
    "aaData": testdata.aaData,
    "aoColumns": [{
        "mData": "dispatchid"
    }, {
        "mData": "itemname"
    }, {
        "mData": "quantity"
    }, {
        "mData": "weight"
    }, {
        "mData": "accountname"
    }]
}).fnFilter('Gecko|Trident|KHTML|Misc|Presto|Webkit|Tasman', 0, true);

fnFilter(values, columnIndex, regex)

Here is the fiddle .

If you have filtering values in an array then you can add this as well:

var filterData = [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'].join('|');