jQuery Datatables draw does not work after filter method

Question

I'm (trying) to use jQuery Datatables https://datatables.net/

I have a column in my table with only numbers. For example:

<table id="queue-table">
    <tr>
        <td>Name</td>
        <td>Count</td>
    </tr>
    <tr>
        <td>joe</td>
        <td>1</td>
    </tr>
    <tr>
        <td>sam</td>
        <td>0</td>
    </tr>
    <tr>
        <td>mike</td>
        <td>2</td>
    </tr>
</table>

I would like to make a filter that shows only rows with a count greater then 0. So I can't do a search, since it can be 1,2,3,etc...

I'm trying to use the filter() method . Here is the docs https://datatables.net/reference/api/filter()

Here is what my code looks like:

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

table.column(1).data().filter( function ( value ) {
    return value > 0 ? true : false;
}).draw();

I would expect this to draw the table with only 2 records, but it shows all the rows. What am I doing wrong here?

davidkonrad davidkonrad · Accepted Answer · 2015-04-01T15:38:56

filter() returns a set of filtered rows, it does not perform filtering on the dataset itself. As the link you provide in the question says :

This method should not be confused with search()DT which is used to search for records in the DataTable. (...) and is provided as a utility method for the DataTables API.

(see demo below for proof of concept - your code does exactly what it is intended to do : It returns an API instance with two rows, those holding the values 1 and 2).

To do what you want, you can create a custom filtering function :

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        return parseInt(data[1]) > 0 ? true : false;
    }
);
table.draw();

see demo -> http://jsfiddle.net/fw8zu34t/

jQuery Datatables draw does not work after filter method

1 Answers