5

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.

2
  • DataTable() or dataTable() ? Commented Oct 7, 2014 at 6:40
  • DataTable() with the upper case D Commented Oct 7, 2014 at 6:41

1 Answer 1

11

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).

Sign up to request clarification or add additional context in comments.

4 Comments

thanks for clearing that up for me.. then the only way to do this now with the non "oldschool" dataTable is to make an api for it at this moment?
@ChristianBurgos, yes - but if you will give up the dot chaining, you can do both. See updated answer.
is this applicable for serverside processing?
I used jquery-1.11.1.min.js, Just changed the $('#example').DataTable to $('#example').dataTable It worked like a charm! Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.