javascript - 使用 dataTable 的列过滤不起作用

Question

下面我有一个值数组(testdata)，它被赋予了 dataTable 。

现在我想为数据表添加列过滤。 我使用了以下代码。

//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>

控制台显示以下错误:

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

Answer 1

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

这是因为列过滤一个单独的插件，您可能没有包含它。

您还可以像这样使用 fnFilter():

$('#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)

这是 fiddle .

如果您在数组中有过滤值，那么您也可以添加:

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