jquery datatables: columnFilter() is not a function error

Question

i am using Data Tables with custom server side filtering, search and sorting... why is the columnFilter() returning an error "TypeError: $(...).DataTable(...).columnFilter is not a function"

here 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 the ".columnFilter()" works fine.

Answer 1

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

works not, produces same error as in the question :
columnFilter with 1.10.x instantiated with DataTable() -> http://jsfiddle.net/87kam74q/

works :
columnFilter with 1.10.x instantiated with dataTable() -> http://jsfiddle.net/LvL4vm8e/

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

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

---

If you not want to go through table.api() for using the new AP, and insists on using DataTable(), you can achieve the same by giving up the chaining :

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

fiddle -> http://jsfiddle.net/qbr01oya/. This does not result in the dataTable being initialized twice (dataTables check for that).