Reputation: 758
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
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
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
for
is faster than jQuery's $(object).each();
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
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