Searching in table jQuery

Question

I have made a script to find strings in table. When it finds it shows the row otherwise hide it. It is working perfectly in Chrome but it is some what lagging in Firefox and Internet Explorer. Is this code good or can it be better ?

$("#searchValue").keyup(function() {

  var table = $(this).siblings('table').not(':hidden');
  var name = $("#searchValue").val();
  if (name === "") {
    $(table).find('tr').show();
    $(table).trigger('update');
  }
  else {
    name = name.toLowerCase();
    var trs = $(table).find('tr').not(':first');
    trs.each(function() {
      var tr = $(this);
      var count = ($(tr).children('td').length);
      var suc = -1;
      for (var i = 0; i < count; i++) {
        var state = $(tr).children("td").eq(i).html();
        state = state.toLowerCase();
        if (state.match(name)) {
          suc = 1;
        }
        else if (suc !== 1) {
          suc = 0;
        }
      }
      if (suc === 1) {
        $(tr).show();
      }
      else {
        $(tr).hide();
      }
    });

    $(table).trigger('update');
  }
});

Table :

  <table id='tableProject' class='tablesorter'>
    <thead>
        <tr>
            <th>Project ID</th>
            <th>Customer</th>
            <th>Description</th>
            <th>Status</th>
            <th>Max Hours</th>
            <th>Achieved</th>
            <th>Difference</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

can you provide a table sample also

Arun P Johny
– Arun P Johny

2013-12-13 07:48:30 +00:00
Commented Dec 13, 2013 at 7:48 — Arun P Johny
– Arun P Johny, Commented Dec 13, 2013 at 7:48
Is it possible for you to use DataTables?

Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman

2013-12-13 07:51:20 +00:00
Commented Dec 13, 2013 at 7:51 — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 13, 2013 at 7:51
few more records so that we can play around

Arun P Johny
– Arun P Johny

2013-12-13 07:52:05 +00:00
Commented Dec 13, 2013 at 7:52 — Arun P Johny
– Arun P Johny, Commented Dec 13, 2013 at 7:52

animuson · Accepted Answer · 2014-01-27 01:41:34Z

The .eq() within the for loop could potentially (not positive) be the cause of your performance issues. Within each tr you are saying "now iterate over the DOM multiple times and find td with this index".

Also IMO, using a for loop within .each() is redundant.

Avoid using .eq() in this scenario and simply use .filter():

Demo

$(function () {
    $("#searchValue").keyup(function () {
        var table = $(this).siblings('table').not(':hidden'),
            name = $("#searchValue").val().toLowerCase();

        if (!name) {
            $(table).find('tr').show();
            $(table).trigger('update');
        } else {
            var trs = $(table).find('tbody tr');

            trs.each(function () {
                var tr = $(this),
                    results = null;

                results = tr.find('td').filter(function () {
                    return $(this).html().toLowerCase().match(name);
                });

                if (!results.length) {
                    tr.hide()
                } else {
                    tr.show();
                }
            });
            $(table).trigger('update');
        }
    });
});

Collectives™ on Stack Overflow

Searching in table jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related