Question posted in 
The search box that I have added to my HTML table is only working on the current page of the table and not on the other paginated pages of the table. I want it to show the search result from anywhere in the entire table.
And I also want to show the current page row count and total page row count at the bottom of my table in this format, which keeps changing as per the table rows, e.g., "Showing 1 to 2 of 8." You can see it at the bottom of the page. It will be really helpful if the expert helps me out with this.
function myFunction() {
var input, filter, table, tr, td, i, txtValue, pagination;
input = document.getElementById("myInput");
filter = input.value.toLowerCase();
table = document.getElementById("paginated-list");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
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.toLowerCase().indexOf(filter) > -1) {
tr[i].style.display = "";
j = alltags.length;
isFound = true;
}
}
}
if (!isFound && tr[i].className !== "header") {
tr[i].style.display = "none";
}
}
}
//Table Search Script Ends
// Table Pagination Script Starts
const paginationNumbers = document.getElementById("pagination-numbers");
const pageCount_ele = document.getElementById("pageCount") // Handle the page values
const currentPage_ele = document.getElementById("currentPage")
const paginatedList = document.getElementById("paginated-list");
const listItems = paginatedList.querySelectorAll("tbody tr");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");
const paginationLimit = 2;
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage = 1;
const disableButton = (button) => {
button.classList.add("disabled");
button.disable = true;
};
const enableButton = (button) => {
button.classList.remove("disabled");
button.disable = false;
};
const handlePageButtonsStatus = () => {
if (currentPage === 1) {
disableButton(prevButton);
} else {
enableButton(prevButton);
}
if (pageCount === currentPage) {
disableButton(nextButton);
} else {
enableButton(nextButton);
}
};
const handleActivePageNumber = () => {
currentPage_ele.innerText = currentPage
enableButton(prevButton) // Assing them as clickable
enableButton(nextButton)
if (currentPage == pageCount){
disableButton(nextButton) // if last page disable next
}
if (currentPage == 1){
disableButton(prevButton) // if 1st disable prev
}
};
const appendPageNumber = (index) => {
const pageNumber = document.createElement("button");
pageNumber.className = "pagination-number";
pageNumber.innerHTML = index;
pageNumber.setAttribute("page-index", index);
pageNumber.setAttribute("aria-label", "Page " + index);
paginationNumbers.appendChild(pageNumber);
};
const getPaginationNumbers = () => {
};
const setCurrentPage = (pageNum) => {
currentPage = pageNum;
handleActivePageNumber();
handlePageButtonsStatus();
const prevRange = (pageNum - 1) * paginationLimit;
const currRange = pageNum * paginationLimit;
listItems.forEach((item, index) => {
item.classList.add("hidden");
if (index >= prevRange && index < currRange) {
item.classList.remove("hidden");
}
});
};
window.addEventListener("load", () => {
getPaginationNumbers();
setCurrentPage(1);
prevButton.addEventListener("click", () => {
setCurrentPage(currentPage - 1);
});
nextButton.addEventListener("click", () => {
setCurrentPage(currentPage + 1);
});
pageCount_ele.innerText = pageCount
});
.result {
text-align: center;
padding-bottom: 20px;
width: 100%;
}
.canel-trains-grids {
float: left;
width: 100%;
margin-bottom: 20px;
}
.canel-trains-grids .left-cancel {
float: left;
width: 60%;
margin-top: 10px;
}
.canel-trains-grids .left-cancel span {
float: left;
font-size: 16px;
background: #34A853;
color: #fff;
font-weight: 400;
padding: 8px 8px;
border-radius: 3px;
text-align: left;
line-height: 1.5em;
width: auto;
}
.canel-trains-grids .right-cancel {
float: right;
width: 30%;
margin-top: 10px;
}
.canel-trains-grids .right-cancel label {
float: left;
vertical-align: middle;
line-height: 39px;
font-size: 16px;
color: #000;
font-weight: 400;
}
.canel-trains-grids .right-cancel input {
width: 230px;
height: 22px;
border: 1px solid #dae9f3;
border-radius: 5px;
padding: 8px 8px 8px 16px;
float: right;
}
.canel-trains-grids .right-cancel input:focus {
outline: none;
}
/* Responsive Table Start */
.rstable {
width: 100%;
margin: 0 auto;
padding: 16px 0px;
}
.rstable table {
font-family: calibri, sans-serif;
border-collapse: collapse;
font-size: 16px;
width: 100%;
font-weight: 400;
}
.rstable tr {
border-bottom: 1px solid #ccc;
}
.rstable tr td {
text-align: left;
padding: 9px;
color: #333;
}
.rstable th {
text-align: left;
padding: 10px 9px;
background: #004287;
color: #fff;
font-weight: 500;
}
.rstable tr:nth-child(even) {
background: #f9fbfdc4;
}
.rstable tr:nth-child(odd) {
background: #dae9f3;
}
.rstable tr td a {
color: #004287;
font-size: 16px;
}
@media (min-width: 768px) and (max-width: 1023px) {
.rstable table {
font-size: 15px;
}
}
@media screen and (max-width: 767px) {
.rstable table {
font-size: 16px;
font-weight: 400;
}
.rstable thead {
display: none;
}
.rstable td:first-child {
text-align: left;
display: inline-grid;
width: 90%;
}
.rstable td {
text-align: left;
display: inline-grid;
width: 26%;
vertical-align: top;
color: #333;
font-weight: 400;
}
.rstable td:before {
content: attr(data-title);
font-weight: 500;
padding-bottom: 5px;
font-size: 16px;
color: #000;
}
}
@media (min-width: 280px) and (max-width: 319px) {
.rstable td {
width: 23%;
}
}
/* Responsive Table Ends */
.arrow-right,
.arrow-left {
display: block;
margin: 10px auto;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-left: 2px solid #000;
}
.arrow-right {
transform: rotate(135deg);
}
.arrow-left {
transform: rotate(-45deg);
}
.hidden {
display: none;
}
.pagination-container {
width: calc(100% - 0rem);
display: flex;
align-items: center;
position: relative;
bottom: 0;
padding: 0rem 0;
justify-content: right;
/* text-align: center; */
}
.pagination-number,
.pagination-button {
font-family: calibri, sans-serif;
font-size: 16px;
background-color: #0085b6;;
border: none;
margin: 0.1rem 0.1rem;
cursor: pointer;
height: 2rem;
width: 2rem;
border-radius: 0.2rem;
}
.newpagination-numbers {
font-family: calibri, sans-serif;
font-size: 16px;
background-color: #333;;
border: none;
margin: 0.1rem 0.1rem;
height: 2rem;
width: 2rem;
line-height: 2rem;
border-radius: 0.2rem;
color: #fff;
text-align: center;
}
.newpagination-numbers:hover {
background: #34A853;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
color: #fff !important;
background: #FBBC05;
}
button.disabled {
background-color: #c82333; /*Make it whatever color you want*/
}
.disabled {
color: #333 !important;
pointer-events: none !important;
cursor: not-allowed !important;
}
span.disabled {
border-color: #333 !important;
}
.pagination-number.active {
color: #fff;
background: #0085b6;
} <div class="result">
<div class='canel-trains-grids'>
<div class='left-cancel'><span>22 Rajdhani Express Trains Listed</span>
</div>
<div class='right-cancel'>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder='Enter Train Number'>
</div>
</div>
</div>
<!-- Result Table Starts -->
<div class="rstable">
<table id="paginated-list">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Joined</th>
<th>Salary</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Browser</th>
<th>Platform</th>
<th>Engine</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Name">Airi Satou</td>
<td data-title="Position">Accountant</td>
<td data-title="Office">No1</td>
<td data-title="Extn.">1</td>
<td data-title="Joined">Mar1</td>
<td data-title="Salary">GKP</td>
<td data-title="Company">Island Trading</td>
<td data-title="Contact">01</td>
<td data-title="Country">Germany</td>
<td data-title="Browser">Chrome1</td>
<td data-title="Platform">Win 10</td>
<td data-title="Engine">97</td>
<td data-title="Grade">A</td>
</tr>
<tr>
<td data-title="Name">Angelica Ramos</td>
<td data-title="Position">CEO</td>
<td data-title="Office">CR</td>
<td data-title="Extn.">2</td>
<td data-title="Joined">Mar2</td>
<td data-title="Salary">GKP</td>
<td data-title="Company">Island Trading</td>
<td data-title="Contact">02</td>
<td data-title="Country">India</td>
<td data-title="Browser">Chrome2</td>
<td data-title="Platform">Win 10</td>
<td data-title="Engine">96</td>
<td data-title="Grade">A</td>
</tr>
<tr>
<td data-title="Name">Ashton Cox</td>
<td data-title="Position">Technical Author</td>
<td data-title="Office">Software Engineer</td>
<td data-title="Extn.">3</td>
<td data-title="Joined">Mar3</td>
<td data-title="Salary">GKP</td>
<td data-title="Company">Island Trading</td>
<td data-title="Contact">03</td>
<td data-title="Country">Japan</td>
<td data-title="Browser">Chrome3</td>
<td data-title="Platform">Win 10</td>
<td data-title="Engine">95</td>
<td data-title="Grade">A</td>
</tr>
<tr>
<td data-title="Name">Bradley Greer</td>
<td data-title="Position">Integration Specialist</td>
<td data-title="Office">CR</td>
<td data-title="Extn.">4</td>
<td data-title="Joined">Mar4</td>
<td data-title="Salary">GKP</td>
<td data-title="Company">Island Trading</td>
<td data-title="Contact">04</td>
<td data-title="Country">UK</td>
<td data-title="Browser">Chrome4</td>
<td data-title="Platform">Win 10</td>
<td data-title="Engine">94</td>
<td data-title="Grade">A</td>
</tr>
<tr>
<td data-title="Name">Brenden Wagner</td>
<td data-title="Position">Software Engineer</td>
<td data-title="Office">CR</td>
<td data-title="Extn.">5</td>
<td data-title="Joined">Mar</td>
<td data-title="Salary">GKP</td>
<td data-title="Company">Island Trading</td>
<td data-title="Contact">05</td>
<td data-title="Country">USA</td>
<td data-title="Browser">Chrome5</td>
<td data-title="Platform">Win 10</td>
<td data-title="Engine">93</td>
<td data-title="Grade">A</td>
</tr>
<tr>
<td data-title="Name">Brielle Williamson</td>
<td data-title="Position">Pre-Sales Support</td>
<td data-title="Office">CR</td>
<td data-title="Extn.">6</td>
<td data-title="Joined">Mar</td>
<td data-title="Salary">GKP</td>
<td data-title="Company">Island Trading</td>
<td data-title="Contact">06</td>
<td data-title="Country">Canada</td>
<td data-title="Browser">Chrome6</td>
<td data-title="Platform">Win 10</td>
<td data-title="Engine">92</td>
<td data-title="Grade">A</td>
</tr>
<tr>
<td data-title="Name">Bruno Nash</td>
<td data-title="Position">Sales Assistant</td>
<td data-title="Office">CR</td>
<td data-title="Extn.">7</td>
<td data-title="Joined">Mar</td>
<td data-title="Salary">GKP</td>
<td data-title="Company">Island Trading</td>
<td data-title="Contact">07</td>
<td data-title="Country">Italy</td>
<td data-title="Browser">Chrome7</td>
<td data-title="Platform">Win 10</td>
<td data-title="Engine">91 </td>
<td data-title="Grade">A</td>
</tr>
<tr>
<td data-title="Name">Caesar Vance</td>
<td data-title="Position">Javascript Developer</td>
<td data-title="Office">CR</td>
<td data-title="Extn.">8</td>
<td data-title="Joined">Mar</td>
<td data-title="Salary">GKP</td>
<td data-title="Company">Island Trading</td>
<td data-title="Contact">08</td>
<td data-title="Country">Mexico</td>
<td data-title="Browser">Chrome8</td>
<td data-title="Platform">Win 10</td>
<td data-title="Engine">90</td>
<td data-title="Grade">A</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; display: flex;align-items: center;">
<div style="text-align: left; width: 50%;">
<span id="currpagecount">Showing 1 to 2 of </span><span id="totalrowscount">8</span>
</div>
<div class="pagination-container">
<button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
<span class="arrow-left"></span>
</button>
<div id="pagination-numbers" class="newpagination-numbers">
<span id="currentPage"></span>/<span id="pageCount"></span>
</div>
<button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
<span class="arrow-right"></span>
</button>
</div>
</div>
<!-- Result Table Ends -->
2
Answers
The search function seems to be fine, but it seems that the items that are displayed should be also properly factored in. Currently you only hide the items that you haven’t found in the search function, while the remaining items that actually match your search criteria has the hidden class applied which needs to be removed so that they are displayed.
As far as pagination is concerned, the logic is scattered out a lot. I would suggest encapsulating the logic to a function that calculates the current page index, the total number of items in the table and sets the appropriate text content of pagination string text or the just the values in it. Then using this function on document load and while triggering the search function (and anything that potentially modifies how the table is displayed) should keep everything in sync.
H
Here is a quick fix to what you need althoug your searching myfunction() is filtering results properly. But what I understood from what you need is if using your search input you want to show the result from all your available data. I just changed your myFunction() and added some flag in your button eventlistener to make your search work on all pages even if input is empty you get the same initial page. Used trim() function to avoid ’empty’ searches