Uncaught TypeError: table.search(...).draw is not a function

Question

Added filtering to a jQuery DataTables plugin, and it is not working very well.

I want to have two links that will search for records on specific search words. To figure out how to do that I first tried to use this example. It uses an input field to search for values in the table. It generates this error:

Uncaught TypeError: table.search(...).draw is not a function

My code:

$(document).ready(function() {
    $('#store-list').dataTable({
        "sPaginationType": "full_numbers"
    });

    var table = $('#store-list').DataTable();   

    $('#myFilter').on( 'keyup', function () {
    table
        .search( this.value )
        .draw();
    } );
});

I have tried different things to make this work:

• Swapped .DataTable() with .dataTable().api() and .dataTable()

• Tried ( this.val() ) and ( $('#myFilter').val() ) (link)

• Tried table.search( this.value ).draw; (without () )

• In desperation I tried without search and then without draw

Can someone please help me find the error?

Answer 1

CAUSE

You're using DataTables plug-in 1.9.4 but API methods and example for newer 1.10.x release.

API methods have changed when DataTables plug-in was updated to 1.10 version, see Converting parameter names for 1.10 for details.

SOLUTION #1

Upgrade your DataTables library to version 1.10 to use search() API method.

SOLUTION #2

If you cannot upgrade to version 1.10 for some reason, use the code below. There is similar example for version 1.9 , see DataTables individual column filtering example.

For DataTables 1.9

$(document).ready(function(){

    $('#store-list').dataTable({
        "sPaginationType": "full_numbers"
    });

    $("#myFilter").on('keyup', function (){
        $('#store-list').dataTable().fnFilter(this.value);
    });
});

See fnFilter API reference for additional optional parameters.

Answer 2

Just Make sure with naming conventions

If you are using the remote datable Initialize the data-table with the following syntax

var table = $('#store-list').DataTable();

instead of

var table = $('#store-list').dataTable();

console the variable table

console.log(table)

It will show you all the remote accessible properties

$: ƒ () ajax: {dt_wrapper: true, json: ƒ, params: ƒ, reload: ƒ, url: ƒ} cell: ƒ () cells: ƒ () clear: ƒ () column: ƒ () columns: ƒ () context: [{…}] data: ƒ () destroy: ƒ () draw: ƒ () i18n: ƒ () init: ƒ () off: ƒ () on: ƒ () one: ƒ () order: ƒ () page: ƒ () row: ƒ () rows: ƒ () search: ƒ () selector: {rows: null, cols: null, opts: null} settings: ƒ () state: ƒ () table: ƒ () tables: ƒ () __proto: Object(0)

dataTable will work without any issue if you are using a client data-table

Answer 3

This work for me:

var table = $('#campaniasVinculadas').DataTable();

$('#myFilters input').on( 'keyup', function () {
    table
        .search( this.value )
        .draw();
});

I use the selector '#myFilters input' because the id "#myFilters" for Tfoot doesn't have a "value" attribute, but "input" has the value attribute.