How to build a simple table filter with jQuery?

Question

How can I build a simple table filter with good effect using jQuery? I don't mind about pagination.

list -> select data of database.

I do not want to use a plugin, I prefer the use of short code.

Example: Table Filter With JQuery

What do you mean with `Good Effect`? What do you have so far if you don't want plugins? — pimvdb, Aug 13 '11 at 16:35
@pimvdb - Effect for `hide()`.I can not use the plugin, because my code the size is high. — Sheikhasa Mozali, Aug 13 '11 at 16:39
I see but your question is a little broad. It does not differ much from a 'code this for me' question, which is not what Stack Overflow is for. You might want to show some code to get help for. — pimvdb, Aug 13 '11 at 16:41

thecodeparadox · Accepted Answer · 2011-08-13T17:36:00.850

5

$('#inputFilter').keyup(function() {
    var that = this;
    $.each($('tr'),
    function(i, val) {
        if ($(val).text().indexOf($(that).val()) == -1) {
            $('tr').eq(i).hide();
        } else {
            $('tr').eq(i).show();
        }
    });
});

CHECH THIS

edited Aug 13 '11 at 17:36

answered Aug 13 '11 at 17:13

thecodeparadox

86,271
21
138
164

please give me `example` in http://jsfiddle.net. did this is for all `paginations`? – Sheikhasa Mozali Aug 13 '11 at 17:21
@Sheikhasa Mozali i gave you the fiddle. please check – thecodeparadox Aug 13 '11 at 17:30
why do disappear ? – calexandru Mar 18 '14 at 14:59
1

to prevent `` from disappearing use `$("tbody tr")` as selector.. Also adding `toLowerCase()` to both strings would result in case insensitive filtering – Joaquín L. Robles Jul 14 '15 at 16:33

score 3 · Answer 2 · answered Aug 13 '11 at 17:23

3

I don't normally help out with this, but I got bored this morning..

http://jsfiddle.net/hHJxP/

answered Aug 13 '11 at 17:23

Jacksonkr

31,583
39
180
284

score 2 · Answer 3 · answered May 28 '18 at 15:06

I know it's kinda late but hope this code helps.

<script>
$(document).ready(function(){
  $("#yourInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#yourTableId tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

score 0 · Answer 4 · answered Aug 13 '11 at 17:00

0

Try testing the innerHTML of the row to the value of the input field, showing / hiding the content depending on the test-result.

$('#test').bind('keyup', function() {
    var s = new RegExp(this.value);
    $('tr').each(function() {
        if(s.test(this.innerHTML)) $(this).show();
        else $(this).hide();
    });
});

JSFIDDLE with example table and input field.

edit

It might be better to use .text() instead of innerHTML. Performancewise innerHTML would be better, but .text() doesn't accept the html-tags as valid search results. JSFIDDLE #2.

answered Aug 13 '11 at 17:00

if there is `pagination` this work for all dataes or only for same page of `pagination`?(i want work for `all page in pagination`) this is ok? – Sheikhasa Mozali Aug 13 '11 at 17:04
This will only work for the current table page. So if you're on page 5, only results on page 5 will be found and filtered. – Aug 13 '11 at 17:06

How to build a simple table filter with jQuery?

4 Answers4