DataTables: filter rows based on value in column

Question

I need to filter out rows from a datatable that do not contain a certain value in a column. For example, with the data below, I would like to just show results where type = "Dog":

<table id="petowners">
<tr>
    <th>Type</th>
    <th>Breed</th>
    <th>Owner</th>
</tr>
<tr>
    <td>Dog</td>
    <td>Doberman</td>
    <td>Peter</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Jaguar</td>
    <td>Paul</td>
</tr>
<tr>
    <td>Dog</td>
    <td>Poodle</td>
    <td>Mary</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Lion</td>
    <td>Ringo</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Tiger</td>
    <td>John</td>
</tr>
</table>

Here's the script that I am using to configuring sorting and results-per-page. Obviously the column-based filtering is the missing bit I need help with.

$(document).ready(function() {
    $('#petowners').dataTable( {
        "order": [[ 0, "asc" ]],
        "iDisplayLength": -1,
        "oLanguage": 
            {
                "sLengthMenu": 'Display <select>'+
                    '<option value="10">10</option>'+
                    '<option value="10">25</option>'+
                    '<option value="10">50</option>'+
                    '<option value="100">100</option>'+
                    '<option value="500">500</option>'+
                    '<option value="-1">All</option>'+
                    '</select> records'
            },
    } );
} );

I need to add two links, buttons or checkboxes, one for "Dog" and one for "Cat".

When a user clicks "Dog", only the rows that contain "Dog" in the "Type" column are displayed. Similarly when "Cat" is clicked, only the rows that containt "Cat" in the "Type" column should be displayed.

It seems like a fairly straightforward feature, but I have not been able to find anything in the datatables.net site that shows how this could be done.

I hope this makes sense and someone can help.

Many thanks in advance wOnkO tHe SaNE

Answer 1

With the current version of DataTables you can do this using the 'search' function.

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

If you want to undo the filter, just pass an empty string instead of regex.

data_table.columns(column_index).search('', true, false).draw();

Hope this helps.