Here is my view page which has data array and its viewed using foreach and table tag.
<?php if (count($catArray) > 0) { ?>
<center>
<table class="table_existing" >
<thead>
<tr>
<th>Cat</th>
</tr>
</thead>
<tbody>
<?php
foreach ($catArray as $egs) {
?>
<tr style="border-bottom: 1px solid #000">
<td><?php echo $egs->cat; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</center>
<?php } ?>
I want to filter data of category on change of dropdown :
My Dropdown Code like below :
<select class="inputnw" onchange="searchAllData()">
<?php echo getType($cd) ?>
</select>
My JS like below :
function searchAllData(){
var url = '<?php echo site_url("c/e"); ?>';
window.location.href=url;
}
It filters data when page is reloaded. What i want is to filter $catArray array on change searchAllData method. without refreshing the page.
Suggest me a work around.
Here is the solution :
JS
function onPageSearch() {
var input, filter, table, tr, td, i;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("catTable");
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";
}
}
}
}
View data :
<?php if (count($catArray) > 0) { ?>
<center>
<table id="catTable" class="table_existing" >
<thead>
<tr>
<th>Cat</th>
</tr>
</thead>
<tbody>
<?php
foreach ($catArray as $egs) {
?>
<tr style="border-bottom: 1px solid #000">
<td><?php echo $egs->cat; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</center>
<?php } ?>
Search input field :
<input type="text" id="search" onkeyup="onPageSearch()" placeholder="Search">