Jquery datatables: columnFilter () is not an error function

Question

I use data tables with custom filtering on the server side, search and sort ... why columnFilter () returns the error "TypeError: $ (...). DataTable (...). ColumnFilter is not a function"

this is how i use columnFilter:

var table = $('#item-table').DataTable({ ajax: '<?= site_url("price_update"); ?>', serverSide: true, processing: true, paging: true }).columnFilter(); 

my code without ".columnFilter ()" works fine.

Answer 1

You must use the "oldschool" dataTable() constructor when using columnFilter . Proof of concept:

doesn’t work , it causes the same error as in the question:
columnFilter since 1.10.x created using dataTable() http://jsfiddle.net/87kam74q/

works :
columnFilter since 1.10.x created using dataTable() http://jsfiddle.net/LvL4vm8e /

The reason is that columnFilter assumes that it is working with the "old" jQuery object and not with the new API object. Although you can still access the new API using the .api() method, for example:

 var table = $('#example').dataTable(); table.api().search('test').draw(); 

---

If you don't want to go through table.api() to use the new access point and insist on using dataTable() , you can achieve the same by abandoning the chain:

 var table = $('#example').DataTable(); $('#example').dataTable().columnFilter({ sPlaceHolder : 'head:before', aoColumns: [ { type: "text"}, { type: "text"}, { type: "text"}, { type: "text"}, { type: "text"} ] }); 

script → http://jsfiddle.net/qbr01oya/ . This does not cause the dataTable to be initialized twice (checking the data for this).