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

Darren Hall · Accepted Answer · 2017-02-16 16:10:18Z

13

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.

answered Feb 16, 2017 at 16:10

Darren Hall

9688 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Angry 84 Over a year ago

Clean solution for me and correctly updates the table/stats/status

Zim84 Over a year ago

Could you explain the regex pattern?

Hasib Over a year ago

Can you tell me if i want to search value in condition like <3 . how i can i do that

Robert Karczmarczyk · Accepted Answer · 2015-04-10 20:08:10Z

5

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();
         }
      });
 }

answered Apr 10, 2015 at 20:08

Robert Karczmarczyk

912 bronze badges

1 Comment

jlesse Over a year ago

I tried a similar solution to this but it didn't work properly. I think this probably only works when your data table is not paginated.

Ashwani Goyal · Accepted Answer · 2015-04-10 19:53:02Z

0

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"

answered Apr 10, 2015 at 19:53

Ashwani Goyal

6264 silver badges18 bronze badges

Collectives™ on Stack Overflow

DataTables: filter rows based on value in column

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related