CODEWITHSUNDEEP
jquerydatatabledatatables
rav
rav

Reputation: 247

fnFilter is not a function

I am trying to search in a DataTables column for values selected in a multi select box. I read the values selected in the multi select box to a variable and joined them with "|". I then tried to use the fnFilter for the search, and my code goes as follows: This is how I initiated the table:

var table = jQuery(tableId).DataTable(settings);

where settings are the datatables global settings. Here is the jQuery code:

jQuery('#box2').change(function() {
                var foo = [];
                jQuery('#box2 :selected').each(function(j, selected){
                  foo[j] = jQuery(selected).text();               
                });
                var m= foo.join("|");
                table.fnFilter(m, 2, true, false, true, true);
});

This returns the following error in the console:

Uncaught TypeError: table.fnFilter is not a function

Is it anything wrong with my code? Or is there any better way to do this?

Upvotes: 3

Views: 14954

Answers (4)

Adeel
Adeel

Reputation: 2959

In older versions of DataTable, you have to use fnFilter and for DataTable version 1.10 you must use search.

As I can see your code you're using jQuery(tableId).DataTable(settings); (version 1.10)

So, the solution would be:

var table = jQuery(tableId).DataTable(settings);
table.search(value).draw();

But, in older DataTable versions the table initiated by small d something like this jQuery(tableId).dataTable();. So, in this case you can use fnFilter

var table = jQuery(tableId).dataTable();
table.fnFilter(value);

To read more about DataTable - fnFilter and DataTable - search

Upvotes: 6

Ravi Ram
Ravi Ram

Reputation: 24488

I was getting the same error. The following worked for me:

var dataTable = $('#myTableId').dataTable();

NOT

var dataTable = $('#myTableId').DataTable();

Change DataTable to dataTable

Upvotes: 3

wahmal
wahmal

Reputation: 947

datatables 1.10 having different api.

$().DataTable

is different with 

$().datatable

change your api like this :

table.search(your_key).draw();

Upvotes: 13

MasoodRehman
MasoodRehman

Reputation: 715

I was facing the same error and the following solution did worked for me.

    $(document).ready(function() {

        // if you initialize with DataTable() the old jQuery object function fnFilter() is unavailabl
        // var table = $('#populateTable').DataTable({ 

        var table = $('#populateTable').dataTable({
            searching: true,
            info: true,
            lengthChange: true,
            processing: true,
            serverSide: true,
            ajax: "product/getProductDataset",
            dataSrc: 'data',
            columns: [
                { data: 'product_title' },
                { data: 'product_category' },
                { data: 'product_brand' },
                { data: 'price_crawled_date' },
                { data: 'product_lowest_price', orderable: false },
                { data: 'actions', orderable: false }
            ]
        }); // End: DataTable

        $('div.dataTables_filter input').unbind();
        $('div.dataTables_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                table.fnFilter(this.value);
            }
        });
    });

Happy coding :)

Upvotes: 0

Related Questions