Filtering Table rows using Jquery

Question

I found a Jquery script that does the table filtering stuff based on input field. This script basically takes the filter, splits each word and filters table rows with each word. So at the end you'll have a list of rows that have all the words in the input field.

http://www.marceble.com/2010/02/simple-jquery-table-row-filter/

var data = this.value.split(" ");

$.each(data, function(i, v){
     jo = jo.filter("*:contains('"+v+"')");
});

Now, what I need is that instead of filtering rows that contains each of the words in the input field. I want to filter all the rows that contain at least one of the word in the input field.

One way I've tried is to take each filtered lists into an array...

  var rows = new Array();

 $.each(data, function(i, v){
     rows[i] = jo.filter("*:contains('"+v+"')");
 });

At this stage, I have to make a UNION of all the rows in "rows" array and show them. I'm lost on how to do that exactly.

Above script in action - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540

If I type "cat six" in the filter, I want to show three rows.

nrodic · Accepted Answer · 2015-11-02 22:08:33Z

89

Have a look at this jsfiddle.

The idea is to filter rows with function which will loop through words.

jo.filter(function (i, v) {
    var $t = $(this);
    for (var d = 0; d < data.length; ++d) {
        if ($t.is(":contains('" + data[d] + "')")) {
            return true;
        }
    }
    return false;
})
//show the rows that match.
.show();

EDIT: Note that case insensitive filtering cannot be achieved using :contains() selector but luckily there's text() function so filter string should be uppercased and condition changed to if ($t.text().toUpperCase().indexOf(data[d]) > -1). Look at this jsfiddle.

edited Nov 2, 2015 at 22:08

answered Jun 12, 2013 at 20:52

nrodic

3,0213 gold badges36 silver badges39 bronze badges

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

7 Comments

taylor michels Over a year ago

i love this solution. very comprehensive and takes advantage of jquery's filter() method.

DeanMWake Over a year ago

This helped me a load. I love how simplistic it is even though its so powerful. @nrodic is the real MVP

Timmah Over a year ago

Works well, but it matches any rows that contain the latest term entered. Is there a way for it to search the results of the first term for the second term?

nrodic Over a year ago

@Timmah - Do you want to show only rows that match ALL words? This jsfiddle might be what you need.

Kennyomar Over a year ago

This is a great solution. Can you make it so it's not case sensitive?

|

Rick Smith · Accepted Answer · 2015-06-22 23:38:17Z

30

There's no need to build an array. You can address the DOM directly.

Try :

rows.hide();
$.each(data, function(i, v){
    rows.filter(":contains('" + v + "')").show();
});

DEMO

EDIT

To discover the qualifying rows without displaying them immediately, then pass them to a function :

$("#searchInput").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    var _rows = $();//an empty jQuery collection
    $.each(data, function(i, v) {
        _rows.add(rows.filter(":contains('" + v + "')");
    });
    myFunction(_rows);
});

UPDATED DEMO

edited Jun 22, 2015 at 23:38

Rick Smith

9,31916 gold badges85 silver badges86 bronze badges

answered Jun 12, 2013 at 20:49

Beetroot-Beetroot

18.1k3 gold badges39 silver badges44 bronze badges

6 Comments

RKodakandla Over a year ago

think I spoke too soon. Your answer addresses my question exactly but I need a bit more. I don't want to show the rows immediately as I find a matching value. I need to make a list of all those rows and pass them to another function.

Dane411 Over a year ago

After you've filtered and removed the filter, no result in given, whilst all of them should be displayed

Beetroot-Beetroot Over a year ago

Dane you're right - my demo doesn't address that aspect. Try this update, in which an empty filter is handled as a special case.

nclsvh Over a year ago

Simple and clean. Any way to make it case INsensitive?

nclsvh Over a year ago

@RickSmith You have any idea to make this case insensitive? Cant figure it out

|

xeo · Accepted Answer · 2014-02-12 21:56:50Z

5

based on @CanalDoMestre's answer. I added support for the blank filter case, fixed a typo and prevented hiding the rows so I can still see the column headers.

    $("#filterby").on('keyup', function() {
        if (this.value.length < 1) {
            $("#list tr").css("display", "");
        } else {
            $("#list tbody tr:not(:contains('"+this.value+"'))").css("display", "none");
            $("#list tbody tr:contains('"+this.value+"')").css("display", "");
        }
    });

answered Feb 12, 2014 at 21:56

xeo

8322 gold badges8 silver badges25 bronze badges

Comments

Murat Jumashev · Accepted Answer · 2015-01-12 10:03:38Z

5

I chose @nrodic's answer (thanks, by the way), but it has several drawbacks:

1) If you have rows containing "cat", "dog", "mouse", "cat dog", "cat dog mouse" (each on separate row), then when you search explicitly for "cat dog mouse", you'll be displayed "cat", "dog", "mouse", "cat dog", "cat dog mouse" rows.

2) .toLowerCase() was not implemented, that is, when you enter lower case string, rows with matching upper case text will not be showed.

So I came up with a fork of @nrodic's code, where

var data = this.value; //plain text, not an array

and

jo.filter(function (i, v) {
    var $t = $(this);
    var stringsFromRowNodes = $t.children("td:nth-child(n)")
    .text().toLowerCase();
    var searchText = data.toLowerCase();
    if (stringsFromRowNodes.contains(searchText)) {
        return true;
        }
    return false;
})
//show the rows that match.
.show();

Here goes the full code: http://jsfiddle.net/jumasheff/081qyf3s/

answered Jan 12, 2015 at 10:03

Murat Jumashev

711 silver badge4 bronze badges

3 Comments

noogrub Over a year ago

Added benefit, back-spacing in your version restores all values to the display.

vastlysuperiorman Over a year ago

Just a note for future readers: You can easily change the $t.children() selector from "td:nth-child(n)" to a class like "filter-criteria". Then adding that class to each <td> limits which columns the filter searches.

Karl_S Over a year ago

stringsFromRowNodes.contains needs to be changed to stringsFromRowNodes.includes. I made an edit to the code in the post to reflect this. (May be pending review) I did not change the JSFiddle

CanalDoMestre · Accepted Answer · 2013-11-05 23:23:05Z

4

i have a very simple function:

function busca(busca){
    $("#listagem tr:not(contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}

answered Nov 5, 2013 at 23:23

CanalDoMestre

411 bronze badge

1 Comment

mxmissile Over a year ago

Should be tr:not(:contains.

I_Am_Hated · Accepted Answer · 2016-02-03 11:31:52Z

2

tr:not(:contains(.... work for me

function busca(busca){
    $("#listagem tr:not(:contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}

answered Feb 3, 2016 at 11:31

I_Am_Hated

553 bronze badges

Comments

David O'Regan · Accepted Answer · 2016-04-27 09:43:42Z

2

nrodic has an amazing answer, and I just wanted to give a small update to let you know that with a small extra function you can extend the contains methid to be case insenstive:

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

answered Apr 27, 2016 at 9:43

David O'Regan

2,6742 gold badges16 silver badges13 bronze badges

Comments

Kamran Ul Haq · Accepted Answer · 2019-08-05 00:19:37Z

2

Adding one more approach :

value = $(this).val().toLowerCase();
$("#product-search-result tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});

answered Aug 5, 2019 at 0:19

Kamran Ul Haq

231 silver badge4 bronze badges

Comments

Philipp S. · Accepted Answer · 2016-09-12 15:25:57Z

1

I used Beetroot-Betroot's solution, but instead of using contains, I used containsNC, which makes it case insensitive.

$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText ||
"").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

answered Sep 12, 2016 at 15:25

Philipp S.

584 bronze badges

Collectives™ on Stack Overflow

Filtering Table rows using Jquery

9 Answers 9

7 Comments

EDIT

6 Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

7 Comments

EDIT

6 Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related