PKirby
Reputation: 889
Filter single table with multiple search boxes
I have one table but want to add more search boxes to filter the same table.
Tried adding more search boxes and javascript but unable to filter the table accordingly. I would like (for instance) to see which "BUCO" companies has "EOH" as secondary service provider.
Please see code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('https://www.w3schools.com/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
</style>
</head>
<body>
<h1>Site Configuration Management</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for branch.." title="Search branch">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for company.." title="Search company">
<table id="myTable">
<tr class="header">
<th style="width:4%;">Company</th>
<th style="width:9%;">Branch Name</th>
<th style="width:1%;">AD Site Number</th>
<th style="width:4%;">Site Server Name</th>
<th style="width:4%;">Primary Provider</th>
<th style="width:1%;">Primary Type</th>
<th style="width:4%;">Primary Line Speed</th>
<th style="width:4%;">Primary Circuit Number</th>
<th style="width:4%;">Secondary Primary Provider</th>
<th style="width:4%;">Secondary Type</th>
<th style="width:4%;">Secondary Line Speed</th>
<th style="width:4%;">Secondary Circuit Number</th>
<th style="width:4%;">Voice Telephony Provider</th>
<th style="width:4%;">Email Notification Group</th>
<th style="width:4%;">IT Co-Ordinator</th>
<th style="width:4%;">Store Operator</th>
<th style="width:4%;">Store Landline Number</th>
<th style="width:16%;">Physical Address</th>
<th style="width:4%;">Mon - Fri</th>
<th style="width:4%;">Sat</th>
<th style="width:4%;">Sun</th>
<th style="width:4%;">Public Holidays</th>
</tr>
<tr>
<td>BILDWARE</td>
<td>Bildware Durban</td>
<td>1178</td>
<td>1178fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>770162222</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>671495466</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>BUCHEL</td>
<td>Buchel Arcadia</td>
<td>1172</td>
<td>1172fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>730343022</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>632945266</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>BUCHEL</td>
<td>Buchel Faerie Glenn</td>
<td>1173</td>
<td>1173fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>730343822</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>632944866</td>
<td>Telkom</td>
<td>[email protected]</td>
<td>467564745</td>
<td>45674567457</td>
<td>657675464</td>
<td>5675467456, Gauteng, 0083</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>BUCHEL</td>
<td>Buchel Northlands</td>
<td>1199</td>
<td>1199fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>740510222</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>642418266</td>
<td>Telkom</td>
<td>64745674</td>
<td>5476457</td>
<td>567457</td>
<td>467457645</td>
<td>5674764</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>BUCO</td>
<td>BUCO Acornhoek</td>
<td>1056</td>
<td>1056fp01</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>632726066</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>632950666</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>07h30 - 16h30</td>
<td>07h30 - 12h30</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<td>BUCO</td>
<td>BUCO Alice</td>
<td>0024</td>
<td>No Server</td>
<td>EOH NS</td>
<td>ADSL</td>
<td>1mbps</td>
<td>406530082</td>
<td>EOH NS</td>
<td>3G - Metacom</td>
<td></td>
<td>40240155</td>
<td>Telkom</td>
<td>4576567</td>
<td>547567</td>
<td>M547546754</td>
<td>5674575</td>
<td>5745675476</td>
<td>08h00 - 17h00</td>
<td>08h00 - 13h00</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>BUCO</td>
<td>BUCO Athlone</td>
<td>1166</td>
<td>1166fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>4574574576</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>611581666</td>
<td>Telkom</td>
<td>567457645</td>
<td>457456745</td>
<td>5476547</td>
<td>45674574</td>
<td>5674456745</td>
<td>07h30 - 17h00</td>
<td>07h30 - 13h00</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<td>BUCO</td>
<td>BUCO Bergvliet</td>
<td>1165</td>
<td>1165fp01</td>
<td>Telkom</td>
<td>ME</td>
<td></td>
<td>710204322</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>611581866</td>
<td>Telkom</td>
<td>457576645</td>
<td>457657645</td>
<td>5474567457</td>
<td>021 696 5167</td>
<td>54674567457</td>
<td>07h30 - 17h00</td>
<td>08h00 - 13h00</td>
<td>Closed</td>
<td>08h00 - 13h00</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>I am using Visual Studio Code.
Upvotes: 0
Views: 1022
Answers (2)
Phillip Thomas
Reputation: 1479
I would suggest maintaining the filter state externally in an array. Then whenever the filter gets set, redisplaying the table with the new data. Something like:
let filters = ["",""];
function setFilter(thisInput, thisIndex) {
filters[thisIndex] = thisInput.value.toUpperCase();
filterTable();
}
function filterTable() {
var table = document.getElementById("myTable");
var rows = Object.values(table.getElementsByTagName("tr"));
for(var rowItr=1; rowItr < rows.length; rowItr++) {
var row = rows[rowItr];
var cells = Object.values(row.getElementsByTagName("td"));
var isRowVisible = filters.every((filter, filterIndex) => {
var cell = cells[filterIndex];
var txtValue = cell.textContent || cell.innerText;
return filter === "" || txtValue.toUpperCase().indexOf(filter) > -1;
});
row.style.display = isRowVisible ? "" : "none";
};
}* {
box-sizing: border-box;
}
.myInput {
background-image: url('https://www.w3schools.com/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}<h1>Site Configuration Management</h1>
<input type="text" class="myInput" onkeyup="setFilter(this, 0)" placeholder="Search for branch.." title="Search branch">
<input type="text" class="myInput" onkeyup="setFilter(this, 1)" placeholder="Search for company.." title="Search company">
<table id="myTable">
<tr class="header">
<th style="width:4%;">Company</th>
<th style="width:9%;">Branch Name</th>
<th style="width:1%;">AD Site Number</th>
<th style="width:4%;">Site Server Name</th>
<th style="width:4%;">Primary Provider</th>
<th style="width:1%;">Primary Type</th>
<th style="width:4%;">Primary Line Speed</th>
<th style="width:4%;">Primary Circuit Number</th>
<th style="width:4%;">Secondary Primary Provider</th>
<th style="width:4%;">Secondary Type</th>
<th style="width:4%;">Secondary Line Speed</th>
<th style="width:4%;">Secondary Circuit Number</th>
<th style="width:4%;">Voice Telephony Provider</th>
<th style="width:4%;">Email Notification Group</th>
<th style="width:4%;">IT Co-Ordinator</th>
<th style="width:4%;">Store Operator</th>
<th style="width:4%;">Store Landline Number</th>
<th style="width:16%;">Physical Address</th>
<th style="width:4%;">Mon - Fri</th>
<th style="width:4%;">Sat</th>
<th style="width:4%;">Sun</th>
<th style="width:4%;">Public Holidays</th>
</tr>
<tbody>
<tr>
<td>BILDWARE</td>
<td>Bildware Durban</td>
<td>1178</td>
<td>1178fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>770162222</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>671495466</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>BUCHEL</td>
<td>Buchel Arcadia</td>
<td>1172</td>
<td>1172fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>730343022</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>632945266</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>BUCHEL</td>
<td>Buchel Faerie Glenn</td>
<td>1173</td>
<td>1173fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>730343822</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>632944866</td>
<td>Telkom</td>
<td>[email protected]</td>
<td>467564745</td>
<td>45674567457</td>
<td>657675464</td>
<td>5675467456, Gauteng, 0083</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>BUCHEL</td>
<td>Buchel Northlands</td>
<td>1199</td>
<td>1199fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>740510222</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>642418266</td>
<td>Telkom</td>
<td>64745674</td>
<td>5476457</td>
<td>567457</td>
<td>467457645</td>
<td>5674764</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>BUCO</td>
<td>BUCO Acornhoek</td>
<td>1056</td>
<td>1056fp01</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>632726066</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>632950666</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>07h30 - 16h30</td>
<td>07h30 - 12h30</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<td>BUCO</td>
<td>BUCO Alice</td>
<td>0024</td>
<td>No Server</td>
<td>EOH NS</td>
<td>ADSL</td>
<td>1mbps</td>
<td>406530082</td>
<td>EOH NS</td>
<td>3G - Metacom</td>
<td></td>
<td>40240155</td>
<td>Telkom</td>
<td>4576567</td>
<td>547567</td>
<td>M547546754</td>
<td>5674575</td>
<td>5745675476</td>
<td>08h00 - 17h00</td>
<td>08h00 - 13h00</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>BUCO</td>
<td>BUCO Athlone</td>
<td>1166</td>
<td>1166fp01</td>
<td>Telkom</td>
<td>ME</td>
<td>2mbps</td>
<td>4574574576</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>611581666</td>
<td>Telkom</td>
<td>567457645</td>
<td>457456745</td>
<td>5476547</td>
<td>45674574</td>
<td>5674456745</td>
<td>07h30 - 17h00</td>
<td>07h30 - 13h00</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<td>BUCO</td>
<td>BUCO Bergvliet</td>
<td>1165</td>
<td>1165fp01</td>
<td>Telkom</td>
<td>ME</td>
<td></td>
<td>710204322</td>
<td>Telkom</td>
<td>ADSL</td>
<td>2mbps</td>
<td>611581866</td>
<td>Telkom</td>
<td>457576645</td>
<td>457657645</td>
<td>5474567457</td>
<td>021 696 5167</td>
<td>54674567457</td>
<td>07h30 - 17h00</td>
<td>08h00 - 13h00</td>
<td>Closed</td>
<td>08h00 - 13h00</td>
</tr>
</tbody>
</table>Quite a few changes, but a quick overview:
- On input change call
setFilterand set the filter text / column index - After change call
filterTablewhich loops all rows (except the headers hencerowItrstarting at 1) - Loop all filters with
.everyand compare the filter to the current row's matching cell - Set the row's visibility
This was all a fun exercise, but I would honestly suggest two things:
- Looking into a table / DataTable library to prevent having to recreate this wheel.
- Storing all of this data in an object format and re-rendering the page after filtering. Generally speaking handling DOM elements with business logic (like filtering) is not ideal, but possible.
Upvotes: 1
Geetesh
Reputation: 315
onkeyup="myFunction(this)"
function myFunction(that){
var input, filter, table, tr, td, i, txtValue;
input = that;
//rest of code
}
check https://jsfiddle.net/mgrsf90a/4/
Upvotes: 0
Related Questions
- Search and filter rows in table
- How do I get my search function work to filter searched items from table?
- Filter table with multiple search strings (Vanilla JS)
- Filtering table with multiple filters
- Filter/Search Table HTML
- How to create a filter search to search data from two columns in a table?
- Creating search bar to filter array into table
- Filter/search table doesn't work
- jQuery search and filter table
- same search filter for 2 tables