Tone Tone - 2 months ago 75
jQuery Question

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

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

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.