CODEWITHSUNDEEP
jquerydatatables
Wonko the Sane
Wonko the Sane

Reputation: 832

DataTables: filter rows based on value in column

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

Upvotes: 7

Views: 22809

Answers (3)

Darren Hall
Darren Hall

Reputation: 970

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.

Upvotes: 13

Robert Karczmarczyk
Robert Karczmarczyk

Reputation: 91

Html:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

Javascript:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function () {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }

Upvotes: 5

Ashwani Goyal
Ashwani Goyal

Reputation: 616

Try this:

$('#petowners tr').each(function(){ var tdVal = $(this).find("td:first").text(); if(tdVal == "Dog") continue; else $(this).hide(); });

Its upto you that you want to remove() it or hide(). Also in a similar way you can do for "Cat"

Upvotes: 0

Related Questions