Search and filter through html table data using input textbox

Question

I have a table which is filled dynamically using php. and I wanted to add search functionality to it. after searching similar questions here on stackoverflow I found a JS snippet which I tried.

var $rows = $('#existing tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

jsfiddle link: http://jsfiddle.net/kvkBw/3/

The problem is that when I enter any search term the table itself gets hidden (goes invisible) any help would be appreciated thanks!.

Note that the php code is removed because php is not supported by jsfiddle and also to increase readability

That is an expression I've never seen before, but testing it out it looks like it is equivalent to (text.indexOf(val) === -1). A little too clever, I think. — Mike Edwards
– Mike Edwards, Commented Oct 29, 2013 at 20:02

Cristian Bitoi · Accepted Answer · 2013-10-29 20:30:47Z

3

First, your function search is wrong, what is !~ , and why you try to hide all the occurence you find ??

Try this:

var $rows = $('#existing tbody tr:not(:first)'); // this is the reason for table                        hidding like @drizzie says

$('#search').keyup(function () {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.hide().filter(function () {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();

        return text.indexOf(val) != -1 ;
    }).show();
});

But better look at the DEMO

answered Oct 29, 2013 at 20:30

Cristian Bitoi

1,5571 gold badge10 silver badges14 bronze badges

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

1 Comment

jasmine825 Over a year ago

What do you add in the $('#existing tbody tr:not(:first)') ? And do I need to add a textbox myself?

drizzie · Accepted Answer · 2013-10-29 20:11:53Z

0

You are hiding your first and second rows. Change your row selector to

var $rows = $('#existing tbody tr:not(:first)');

This eliminates your header row and your filter row.

answered Oct 29, 2013 at 20:11

drizzie

3,3612 gold badges30 silver badges32 bronze badges

Comments

DJ22T · Accepted Answer · 2013-12-20 13:46:13Z

0

Remove the .hide() at the end that's what's causing your issue.

Also remove the ! at the beginning of the return value.

   $rows.show().filter(function () {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return text.indexOf(val);
    });

edited Dec 20, 2013 at 13:46

answered Oct 29, 2013 at 20:03

DJ22T

1,6483 gold badges34 silver badges69 bronze badges

Collectives™ on Stack Overflow

Search and filter through html table data using input textbox

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related