Menu
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?
612
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/
195
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
