16

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?

Community
  • 1
  • 1
Tone
  • 163
  • 1
  • 1
  • 6
  • What value are you trying to search for? And what is returned when you do .search(this.value)? – Walker Boh Apr 23 '15 at 13:53
  • Sorry, I forgot to add that #myFilter is an input. So: anything that is typed in the input. As far as I can see nothing is returned. It doesn't filter anyting. The large searchfield on the page is working, but thats an input that is there by default, generated by dataTables. The only change I see is the error message in the console. – Tone Apr 23 '15 at 14:44
  • Before your table.search, can console.log(this.value) and confirm it's recognizing the value correctly? – Walker Boh Apr 23 '15 at 14:56
  • I have added the code, and it recognizes the keystrokes/value correctly. With an error message after each value :-P – Tone Apr 23 '15 at 15:14
  • You are instantiating DataTables twice. Only create 1 instance of it otherwise you'll run into conflicts – Walker Boh Apr 23 '15 at 15:36
  • I tried to comment out the first instance, but I still get the same error... – Tone Apr 23 '15 at 15:43
  • Console.log the table object after instantiating it. Do you see an object collection with all of the DataTable properties? – Walker Boh Apr 23 '15 at 15:53
  • I think so: [table#store-list.autumn-table.responsive.dataTable, context: document, selector: "#store-list", $: function, _: function, fnAddData: function…]. Beneath this is a lot of data/functions ie. You can check for your self if you want to: http://eddainterior.no/testside/finn-forhandler – Tone Apr 23 '15 at 16:14
  • Instead of draw(), try fnDraw() – Walker Boh Apr 23 '15 at 16:47
  • It sort of works... There are no error messages, but it doesn't filter the table. You have been very nice to come up with so many suggestion, thank you! If you have any more, I really appriciate it. – Tone Apr 23 '15 at 17:55

4 Answers4

26

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.

Community
  • 1
  • 1
Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • Thank you so much. I had to modify a plugin using 1.9.4 datatables and couldn't find an archive of its documentation. Really appreciate this :) – Woppi Sep 06 '17 at 04:16
8

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

Lalit Mohan
  • 2,685
  • 2
  • 16
  • 16
2

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.

gawi
  • 2,843
  • 4
  • 29
  • 44
daniel
  • 21
  • 1
0

If you wanted prefill search box of data table you can do it like this.

<script type="text/javascript">
    $(document).ready(function() {
        var table = $('#example').DataTable({
            "iDisplayLength": 100,
            'scrollX': true,
        });
        table.search("put your text here").draw();
    });
</script>

NOTE: use this $('#example').DataTable() not this $('#example').dataTable()

Atul Baldaniya
  • 761
  • 8
  • 14