mithu
Reputation: 247
same search filter for 2 tables
I want to use same search filter for two tables. now its only working for one table
var $rows1 = $('#dev-table tbody tr ');
$('#dev-table-filter ').keyup(function () {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows1.show().filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
var $rows2 = $('#nav-table tbody tr ');
$('#dev-table-filter ').keyup(function () {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows2.show().filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
this is my html code , I think this will help to understand the problem
<div class="panel panel-primaray table-responsive" style="border-color:none !important">
<div class="panel-heading">
<input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table"
placeholder="Search by your will" />
</div>
<div class="panel-body ">
<div class="table-responsive">
<table class="table table-bordered" id="dev-table">
<thead>
<tr style="color: #0078AA">
<th align="center" class="text-center">Airline</th>
<th align="center" class="text-center">Airline Code</th>
<th align="center" class="text-center">Checked Baggage (At a cost)</th>
<th align="center" class="text-center">Hand Baggage</th>
<th align="center" class="text-center">Child Hand Baggage Allowance</th>
<th align="center" class="text-center">First/Business</th>
<th align="center" class="text-center">Frequent Flyer</th>
<th align="center" class="text-center">Excess Charge</th>
<th align="center" class="text-center">Airline Page</th>
</tr>
</thead>
<tbody class="atag">
<tr>
<td class="text-center heading-row" colspan="9">Low Cost Carriers</td>
</tr>
<tr>
<td width="142">cell</td>
<td width="84">cell</td>
<td width="183">cell</td>
<td width="412">cell</td>
<td width="200">cell</td>
<td width="95">-</td>
<td width="99">-</td>
<td width="94">-</td>
<td class="bagss" align="center" height="35">
<a href="#" target="_blank">
cell
</a>
</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td class="bagss" align="center" height="35">
<a href="#"
target="_blank">cell</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered " id=" nav-table">
<thead >
<tr id="myP" style="color: #0078AA">
<th align="center" class="text-center" id="tr1">Airline</th>
<th align="center" class="text-center" id="tr2">Airline <br />Code</th>
<th align="center" class="text-center" id="tr3">Checked Baggage</th>
<th align="center" class="text-center" id="tr4">Hand Baggage</th>
<th align="center" class="text-center" id="tr5">Child Allowance</th>
<th align="center" class="text-center" id="tr6">First/Business</th>
<th align="center" class="text-center" id="tr7">Frequent Flyer</th>
<th align="center" class="text-center" id="tr8">Excess Charge</th>
<th align="center" class="text-center" id="tr9">Airline Page</th>
</tr>
</thead>
<tbody class="atag">
<tr style="color: #0078AA">
<td colspan="9" class="text-center heading-row">A</td>
</tr>
<tr>
<td align="center" height="35" width="115" class="bagss">cell</td>
<td align="center" height="35" width="57" class="bagss">cell</td>
<td align="center" height="35" width="114" class="bagss">cell</td>
<td align="center" height="35" width="92" class="bagss">cell</td>
<td align="center" height="35" width="74" class="bagss">cell</td>
<td align="center" height="35" width="94" class="bagss">cell</td>
<td align="center" height="35" width="81" class="bagss"></td>
<td align="center" height="35" width="126" class="bagss">cell</td>
<td align="center" height="35" width="114" class="bagss">
<a target="_blank"
href="#">
cell
</a>
</td>
</tr>
<tr>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">2cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">
<a target="_blank"
href="#">
cell
</a>
</td>
</tr>
<tr>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">5cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">
<a target="_blank"
href="#">
cell
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm highly struggled with this.please help me with this.hope your help.thanx
Upvotes: 0
Views: 60
Answers (4)
Rajesh
Reputation: 24915
Per my understanding, you are missing keyup event on nav-table, hence it only works on one table.
You can try something like this:
$('#dev-table-filter, #nav-table').keyup(function() {
filter(this);
});
function filter(self) {
var val = '^(?=.*\\b' + $.trim($(self).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$(self).find('tbody tr').show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
}
Upvotes: 0
nandha kumar
Reputation: 29
You cannot use the same ID for .keyup here. Please add the particular element's id after the id:
$('#dev-table-filter ').keyup(
//-------------------^ Add the respective element here
Upvotes: 0
Arun AK
Reputation: 4370
You can make a common function and pass the id of the table with that function like :
function search(id){
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
id.show().filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
}
and in your keyup function you can call it like
$('#dev-table-filter ').keyup(function () {
search($('#dev-table tbody tr '));
});
Hope it works :)
Upvotes: 1
Amar Singh
Reputation: 5622
You have used same ID ,thats the reason its working for only one
IDshould be unique always
Use different ID or Class Instead.
$('#dev-table-filter ').keyup( /*same ID used*/
Upvotes: 2
Related Questions
- Loop (for each) over an array in JavaScript
- Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
- How do I check for an empty/undefined/null string in JavaScript?
- Is there an "exists" function for jQuery?
- Disable same origin policy in Chrome
- Setting "checked" for a checkbox with jQuery
- How do I test for an empty JavaScript object?
- How to change the href attribute for a hyperlink using jQuery