CODEWITHSUNDEEP
javascriptjquerydatatables
Rishikesh D
Rishikesh D

Reputation: 31

Column Filtering using dataTable not woking

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

Upvotes: 2

Views: 226

Answers (1)

Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

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('|');

Upvotes: 1

Related Questions