Sudipta Roy
Sudipta Roy

Reputation: 758

searching in html table

I have a large table with almost 5000 rows. I am using the following jquery snippet to search this table for a particular text.

function searchTable(inputVal) {

    var table = $('.table');

    table.find('tr').each(function(index, row) {
        var allCells = $(row).find('td');

        if(allCells.length > 0) {
            var found = false;
            allCells.each(function(index, td) {
                var regExp = new RegExp(inputVal, 'i');
                if(regExp.test($(td).text())) {
                    found = true;
                    return false;
                }
            });

            if(found == true) {
                $(row).show();
            } else {
                $(row).hide();
            }
        }   
    });
}

Now this script is taking some time to execute because it loops through each cell of each row. Considering the table having 6 cells in a row, total number of iteration is almost 6*5000=30000!
Is there any suggestion to optimize this snippet?

Upvotes: 8

Views: 2758

Answers (3)

Amol M Kulkarni
Amol M Kulkarni

Reputation: 21639

Check the following codes performance with yours:

Code:(excluding jquery.js)

<!DOCTYPE>
<html>
<head>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    function searchTable(inputVal) {  
        $('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
        $("tr").css('display', 'none');
        $(".showthis").parent().parent().css('display', '');
    }
    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" onclick="searchTable('Text');" />
    <table id="tab" class="table" border="1">
        <tr>
            <td>
                Text
            </td>
            <td>
                A
            </td>
        </tr>
        <tr>
            <td>
                C
            </td>
            <td>
                Text
            </td>
            <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td> ER
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr> 
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr> 
    </table>
</body>
</html>

Upvotes: 3

Kishor Kundan
Kishor Kundan

Reputation: 3165

First of all I would like to point out that searching through 5000 rows should not be that heavy. I would also look into other things running concurrently that might have an impact with the performance.

I also do not guarantee you that, the solution below is the optimal but from the tests that I conducted I can see round about 50% increase in speed. I am still looking into optimizing this code here, I will keep on updating this as I go along. I also plan on to make assertive tests from jspref in a day or two.

My Approach

  1. Javascript's native for is faster than jQuery's $(object).each();
  2. DOM Traversing is much faster with #id.
  3. jQuery's .html() uses javascript's innerHTML under the hood. If you can use it directly, it will have some performance boost.

    $(function() {
    
    var searchTest = new function () {
    
        this.tableScope = $("#MyTable");
    
        this.searchTable = function () {
            var start = new Date().getTime();
            this.tableScope.find("tr").hide();
            var matches = 0;
            var searchPattern = new RegExp("abc");// /A/gi;
            var all_TD = document.getElementById("MyTable").getElementsByTagName("td");
    
            for (var i = 0; i < all_TD.length; i++) {
                if (searchPattern.test(all_TD[i].innerHTML)) {
                     all_TD[i].parentNode.style.display = '';
                     i += i % 5;
                     matches++;
                }
            }
            var end = new Date().getTime();
    
            $("#MyMethodClock").text(end - start + " ms to search; Matches found " + matches + " out of 5000 records");
         };
    
    
    
    }
    
    searchTest.searchTable();
    });
    

Here is a working jsFiddle

Upvotes: 1

Ron van der Heijden
Ron van der Heijden

Reputation: 15080

You also could create a custom extension like:

// jQuery expression for case-insensitive filter
$.extend($.expr[":"], 
{
    "contains-ci": function(elem, i, match, array) 
    {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

And use it like so:

$("#table tbody>tr").hide(); // hides all tr
$("#table td:contains-ci('" + value + "')").parent("tr").show(); // show tr that containt value

Here is a running example: http://jsfiddle.net/QvU67/

Upvotes: 3

Related Questions