I have a dynamic table that I am displaying in the front end like this:
<table id ="tblRE">
<tr class="row">
<th ng-repeat="column in cols_re">{{column}}</th>
</tr>
<tr ng-repeat="row in data['dict_re']">
<td ng-repeat="column in cols_re">{{row[column]}}</td>
</tr>
</table>
I want to put a filter on one of the columns named OUT(my 2nd column from the table).
If I would have a fix column name I would do like this:
<tr class="row">
<td class="head" ng-click="sortData='OUT';sortOrder=!sortOrder"> OUT</td>
</tr>
<tr ng-repeat="item in data.table_df| orderBy:sortData:sortOrder | filter:filter ">
<td>{{ item.OUT}}</td>
</tr>
Is there an option on how I can put the filter with my initial option?
I also tried to add a search button which kind of works only for the first column. I want to be able to filter also on the second column.
The code for the search button:
js:
function searchre() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("tblRE");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
and in HTML:
<input class="myInput" type="text" id="myInput" onkeyup="searchre()" placeholder="Search.." title="Type in a name">
Any idea on how I can filter on the first and 2nd column?
Related
<input type="text" id="inputhair" onkeyup="hair()" placeholder="hair color...">
<table id="customers" class="customers">
<tr class="parent" data-toggle="toggle">
<th id="rank" style="text-align:center">#</th>
<th id="name" style="text-align:center">Name</th>
<th id="name" style="text-align:center"></th>
</tr>
<tbody class="content" >
<div class="1">
<tr>
<td>1</td>
<td class="name">Object A</td>
<td class="down"><button onclick="toggleText()" type="button" class="collapsible" id="1">+</button></td>
</tr>
</div>
<tr class="panel" id="1a" colspan="3">
<div class="panel" >
<td class="expand" >
<div class="hair">Black</div>
</td>
</div>
</tr>
</tbody>
</table>
I'm trying to filter out two rows (name and details) of an object from this table if it doesn't match what is searched, but it is not doing anything on the actual website. Please respond if you can. Thank you
Number
Name
1
Object A
+
Black
I tried doing (I have more objects like object 1 all with two lines)...
function hair() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("inputhair");
filter = input.value.toUpperCase();
table = document.getElementById("customers");
tr = table.getElementsByTagName("tr");
// // Loop through all table rows, and hide those who don't match the search query
// for (i = 1; i < tr.length; i++) {
// td = tr[i].getElementsByTagName("td")[0];
// var hairColor = document.getElementsByClassName("hair")[i/2].innerHTML;
// if (hairColor) {
// if (hairColor.toUpperCase().indexOf(filter) > -1) {
// tr[i].style.display = "";
// } else {
// tr[i].style.display = "none";
// tr[i-1].style.display = "none";
// }
// }
// }
for (i = 1; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
var hairColor = document.getElementsByClassName("hair")[i/2].innerHTML;
if (hairColor) {
if ((hairColor.toUpperCase).includes(filter)) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
tr[i-1].style.display = "none";
}
}
}
}
I want to display the table row based on the checkbox selection where I need to display only the particular row. I'm noob in JavaScript and took this snippet from How to show table rows based on checkbox selected
I tried to modify the code as per the requirement but I couldn't able to figure out which I retrieve from the database
In the JS script it matching the td value but I don't mention the table value explicitly all it comes from the db.
<div>Country</div>
<div class="row" name="country_checkbox" id="id_row" onclick="return filter_type(this);">
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="AMERICA" placeholder="Select Country" id="id_country_0">
AMERICA</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="newyork" placeholder="Select Country" id="id_country_3">
newyork</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="china"
placeholder="Select Country" id="id_country_2">china</label>
</li>
</ul>
</div>
<table class="datatable" id='table_id'>
<thead>
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr id="trow">
{% for i in database%}
<td>i.Region</td>
<td>i.Area </td>
<td>i.Country</td>
</tr>
</tbody>
<script>
// checkbox selection
function filter_type(box) {
//alert("checked");
var cbs = document.getElementsByTagName('input');
var all_checked_types = [];
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
if(cbs[i].name.match(/^country/)) {
if(cbs[i].checked) {
all_checked_types.push(cbs[i].value);
}
}
}
}
if (all_checked_types.length > 0) {
$('.dataclass tr:not(:has(th))').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
if (type && all_checked_types.indexOf(type) >= 0) {
$(this).show();
}else{
$(this).hide();
}
});
}else {
$('.datatbl tr:not(:has(th))').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
$(this).show();
});
}
return true;
}
</script>
Your approach could possibly use some work. W3 has a good example of filtering based on inputs that could be helpful in getting you on the right track.
Below I have provided a working example, using the W3 code as a starting place. This should give you an idea how to implement your desired solution.
In the code you provided it appears that you may be working with jQuery. The solution below is pure JS and does not require any outside libraries. In addition to modifying the JS filtering function (filter_type), we moved the onclick attribute from the div holding all the checkboxes and placed it on each individual checkbox input.
<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0" onclick="filter_type();">
NORTHAMERICA</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3" onclick="filter_type();">
LATAM</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" placeholder="Select Country" id="id_country_2" onclick="filter_type();">ASIA</label>
</li>
</ul>
</div>
<table class="datatable" id='table_id'>
<thead>
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr id="trow_1">
<td>i.Region</td>
<td>i.Area </td>
<td>NORTHAMERICA</td>
</tr>
<tr id="trow_2">
<td>i.Region</td>
<td>i.Area </td>
<td>LATAM</td>
</tr>
<tr id="trow_3">
<td>i.Region</td>
<td>i.Area </td>
<td>ASIA</td>
</tr>
</tbody>
<script>
function filter_type() {
//declare variables
var inputs, input, filters, table, tr, td, i, r;
//get all checkbox inputs
inputs = document.querySelectorAll("input[type=checkbox]");
table = document.getElementById("table_id");
tr = table.getElementsByTagName("tr");
//array to hold filters
filters = [];
//loop through inputs and add value for all checked to filters
for (i = 0; i < inputs.length; i++) {
input = inputs[i];
if (input.checked) {
filters.push(input.value);
}
}
//loop through each row in table
for (r = 0; r < tr.length; r++) {
//get column to compare to, in this case the 3rd column
td = tr[r].getElementsByTagName("td")[2];
if (td) {
//get value of the column
txtValue = td.textContent || td.innerText;
//check if column value is the filters array
//or if filters array is empty, show all rows
if (filters.indexOf(txtValue) > -1 || filters.length == 0) {
//true, show row
tr[r].style.display = "";
} else {
//false, hide row
tr[r].style.display = "none";
}
}
}
}
</script>
I have followed this link on how to create/filter search a table. But I want to filter search for each column in my own table. Currently, it only searches for the First Name column. How can I do this?
This is the code:
myHTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th> First Name </th>
<th> Last Name </th>
<th> Age </th>
<th> Language </th>
</tr>
<tr>
<td>John</td>
<td>Kole</td>
<td>18</td>
<td>English</td>
</tr>
<tr>
<td>Pearl</td>
<td>Shine</td>
<td>50</td>
<td>Hindi</td>
</tr>
<tr>
<td>Jacob</td>
<td>Pool</td>
<td>22</td>
<td>Arabic</td>
</tr>
<tr>
<td>David</td>
<td>Struff</td>
<td>30</td>
<td>German</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")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
}
else {
tr[i].style.display = "none";
}
}
}
}
</script>
How can I filter all columns for searching? Currently, it searches the First Name column only.
Check each nodes of the table row instead of just checking tr[i].getElementsByTagName("td")[0]. The zeroth node corresponds to first name field, that's why the search result restricts to the first name field only.. Search for all the nodes instead.
Leave the tr node with class name of header while making the row hidden.
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")[0];
alltags = tr[i].getElementsByTagName("td");
isFound = false;
for(j=0; j< alltags.length; j++) {
td = alltags[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
j = alltags.length;
isFound = true;
}
}
}
if(!isFound && tr[i].className !== "header") {
tr[i].style.display = "none";
}
}
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th> First Name </th>
<th> Last Name </th>
<th> Age </th>
<th> Language </th>
</tr>
<tr>
<td>John</td>
<td>Kole</td>
<td>18</td>
<td>English</td>
</tr>
<tr>
<td>Pearl</td>
<td>Shine</td>
<td>50</td>
<td>Hindi</td>
</tr>
<tr>
<td>Jacob</td>
<td>Pool</td>
<td>22</td>
<td>Arabic</td>
</tr>
<tr>
<td>David</td>
<td>Struff</td>
<td>30</td>
<td>German</td>
</tr>
</table>
Hope this is what you are looking for.
This line:
td = tr[i].getElementsByTagName("td")[0];
gets the first td which is the content for the first column in the table meaning the FirstName column.
Do a loop on all td tags instead of getting only the first one and you'll get the functionality you need.
Get all table rows. Loop through these rows. Put all the innerText from the <td>s in each row together into a string. Check the first occurrence of the search value in the string. If the value is not found, hide the row with display: none else show the row with display: table-row.
Example
const id = "myTable";
const selector = `#${id} tr:not(.header)`;
// Get all rows
const trs = document.querySelectorAll(selector);
function myFunction(event) {
let search = event.target.value.toLowerCase();
trs.forEach((tr) => {
// Get all cells in a row
let tds = tr.querySelectorAll("td");
// String that contains all td textContent from a row
let str = Array.from(tds).map((td) => {
return td.textContent.toLowerCase();
}).join("");
tr.style.display = (str.indexOf(search) > -1) ? "table-row" : "none";
});
}
<input type="text" id="myInput" onkeyup="myFunction(event)" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th> First Name </th>
<th> Last Name </th>
<th> Age </th>
<th> Language </th>
</tr>
<tr>
<td>John</td>
<td>Kole</td>
<td>18</td>
<td>English</td>
</tr>
<tr>
<td>Pearl</td>
<td>Shine</td>
<td>50</td>
<td>Hindi</td>
</tr>
<tr>
<td>Jacob</td>
<td>Pool</td>
<td>22</td>
<td>Arabic</td>
</tr>
<tr>
<td>David</td>
<td>Struff</td>
<td>30</td>
<td>German</td>
</tr>
</table>
home.jsp
<input type="text" id="myContractNumberInput" ng-model="contractno"
ng-change="getContractnNo()" onkeyup="myFunction()" name="contractno"
placeholder="Contract Number.." size="35">
<hr>
<ul>
<li data-ng-repeat="contractTypeData in contractDetailsList">
<table id="myContractTable" border="1">
<tr>
<td>{{contractTypeData.contractId}}</td>
<td>{{contractTypeData.contractDes}}</td>
</tr>
</table>
</li>
</ul>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myContractNumberInput");
filter = input.value.toUpperCase();
table = document.getElementById("myContractTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
The above function on key event must return the entered matching data from the list object as it is not returning the expected data which is entered in text box
You can use angular filter for filtration of result using search input field, please find below example, also there is no need to use myFunction for this filtration, and for any other custom logic, you can create your own custom filter (follow this link https://docs.angularjs.org/api/ng/filter/filter):
function TodoCtrl($scope) {
$scope.contractDetailsList = [
{'contractId': 1,
'contractDes': 'one'},
{'contractId': 2,
'contractDes': 'two'},
{'contractId': 3,
'contractDes': 'three'}
]
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<input type="text" id="myContractNumberInput" ng-model="contractno" name="contractno" placeholder="Contract Number.." size="35">
<hr>
<table id="myContractTable" border="1">
<tr>
<td>ID</td>
<td>Description</td>
</tr>
<tr data-ng-repeat="contractTypeData in contractDetailsList | filter:contractno">
<td>{{contractTypeData.contractId}}</td>
<td>{{contractTypeData.contractDes}}</td>
</tr>
</table>
</div>
I know how to search a table with static data. I'd like to modify my script to search the table with dynamic data but I'm unsure how to do this. I'm opened to use Php but since the javascript I have written already works, I'd like help with making the script dynamic.
script
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("searchData");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
dynamic table
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Address</th>
<th>Country</th>
<th>Time Zone</th>
</tr>
<?php while($company=mysqli_fetch_array($result)){ ?>
<tr>
<td data-th="ID"><?=$company['id'];?></a></td>
<td data-th="Name"><?=$company['title'];?></td>
<td data-th="Description"><?=$company['description'];?></td>
<td data-th="Type"><?=$company['type'];?></td>
<td data-th="Address"><?=$company['address'];?></td>
<td data-th="Country"><?=$company['country'];?></td>
<td data-th="Time Zone"><?=$company['timezone'];?></td>
</tr>
<?php };?>
</table>