I want to search a table by the values in a single column.
The table looks like this:
<table class="table main-content">
<thead>
<td><b>Title</b></td>
<td><b>Name</b></td>
<td><b>State (D)</b></td>
<td><b>Party</b></td>
<td><b>Room</b></td>
<td><b>Phone #</b></td>
<td><b>Special Role(s)</b></td>
</thead>
<tbody id="congress">
<tr>
<td>Senator</td>
<td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td>
<td>TN</td>
<td class="republican">Rep.</td>
<td>455 Dirksen</td>
<td>(202) 224-4944</td>
<td></td>
</tr>
<tr>
<td>Senator</td>
<td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td>
<td>WY</td>
<td class="republican">Rep.</td>
<td>307 Dirksen</td>
<td>(202) 224-6441</td>
<td></td>
</tr>
...
I want to be able to search the table by a given column, say names (index 1) or state (index 2). I've tried jets.js but it only allows one instance per page while I require at least two. JQuery is preferred, JS is fine, and external libs are ok but not optimal.
Cheers!
Edit:
I've tried using the following:
var $rows = $('#congress tr');
$('#stateSearch').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
The above code searches all of the columns in the table. How can I adjust it to search only for a specific column? (By index.)
The goal is to hide all of the tr that don't match the query in the given column
Something like this
function isFound(name, state)
{
$("table tbody").find("tr").each (function(){
var trElem = $(this);
if (($(this).find("td:eq(1) a").text() == name) && ($(this).find("td:eq(2)").text() == state))
return trElem;
})
return false;
}
Usage:
if (tr = isFound ('Firstname Lastname', 'State'))
tr.remove();
or, if you have more than one elements, use a loop for removing
while (tr = isFound ('Firstname Lastname', 'State'))
tr.remove();
Here's an example that will hide all rows where the State column (index 3) is TN. You can adapt it as you need:
$('td:nth-child(3)').each (function(){
if( $(this).val() == 'TN' )
$(this).parent().hide();
});
Another easy solution would be to use Datatables, which have a built-in search feature and methods to search by column. It may be overkill for your project, but take a look anyway for the future.
You could reinvent the wheel, but it's probably better to just use DataTables unless you have an expressed need to do otherwise:
var $table = $('table');
// Setup - add a text input to each footer cell
$table.find('tfoot th').filter(':eq(1),:eq(2)').css('visibility', 'visible').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $table.DataTable({
lengthChange: false
});
// Apply the search
table.columns().every(function() {
var col = this;
$('input', this.footer()).on('keyup change', function() {
if (col.search() !== this.value)
col.search(this.value).draw();
});
});table tfoot tr th {
visibility: hidden;
}<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.js"></script>
<table class="table table-striped main-content">
<thead>
<tr>
<th>Title</th>
<th>Name</th>
<th>State (D)</th>
<th>Party</th>
<th>Room</th>
<th>Phone #</th>
<th>Special Role(s)</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Title</th>
<th>Name</th>
<th>State (D)</th>
<th>Party</th>
<th>Room</th>
<th>Phone #</th>
<th>Special Role(s)</th>
</tr>
</tfoot>
<tbody id="congress">
<tr>
<td>Senator</td>
<td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td>
<td>TN</td>
<td class="republican">Rep.</td>
<td>455 Dirksen</td>
<td>(202) 224-4944</td>
<td></td>
</tr>
<tr>
<td>Senator</td>
<td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td>
<td>WY</td>
<td class="republican">Rep.</td>
<td>307 Dirksen</td>
<td>(202) 224-6441</td>
<td></td>
</tr>
</tbody>
</table>