The following HTML, CSS, and javascript code can be used to add pagination to the table in the custom html page.
Html:
<div class=“m-4”>
<table id=“example” class=“table table-hover”>
<thead class=“table-dark”>
<tr>
<th>Account Number</th>
<th>Account Name</th>
<th>Account Description</th>
<th>Version</th>
<th>Is Template</th>
</tr>
</thead>
<tbody id=“tableBody”>
</tbody>
</table>
</div>
<div id=“pagination-container”></div>
CSS:
#pagination-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination-button {
margin: 0 5px;
cursor: pointer;
padding: 5px 10px;
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
border-radius: 5px;
}
.pagination-button:hover {
color: #fff;
background-color: #5a6268;
border-color: #545b62;
}
.pagination-button:focus,
.pagination-button.focus {
color: #fff;
background-color: #5a6268;
border-color: #545b62;
box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}
JS code:
/**
* Function is used to process the response
* @param {*} data response data
*/
function processedFileResponse(data) {
try {
data = data.replace(/SINGLE_QUOTES/g, “‘”);
processedFileResponseArray = JSON.parse(data);
addPagination(processedFileResponseArray.length);
setCurrentPage(1);
displayData(processedFileResponseArray);
} catch (e) {
console.error(‘error @ processedFileResponse’, e);
}
}
/**
* Function is used to Display data in the table
* @param {*} processedFileResponseArray response data
*/
function displayData(processedFileResponseArray) {
try {
const table = document.getElementById(‘tableBody’);
table.innerHTML = ”;
const currentPage = getCurrentPage();
const startIndex = (currentPage – 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
for (let i = startIndex; i < endIndex && i < processedFileResponseArray.length; i++) {
const newRow = document.createElement(‘tr’);
for (let key in processedFileResponseArray[i]) {
const newCell = document.createElement(‘td’);
newCell.textContent = processedFileResponseArray[i][key];
newRow.appendChild(newCell);
}
table.appendChild(newRow);
}
} catch (e) {
console.error(‘error @ displayData’, e);
}
}
/**
* Add pagination buttons
* @param {*} totalRows total rows
*/
function addPagination(totalRows) {
try {
const pageCount = Math.ceil(totalRows / rowsPerPage);
const paginationContainer = document.getElementById(‘pagination-container’);
paginationContainer.innerHTML = ”;
for (let i = 1; i <= pageCount; i++) {
const button = document.createElement(‘button’);
button.textContent = i;
button.classList.add(‘pagination-button’);
button.addEventListener(‘click’, () => {
setCurrentPage(i);
displayData(processedFileResponseArray);
});
paginationContainer.appendChild(button);
}
} catch (e) {
console.error(‘error @ addPagination’, e);
}
}
/**
* Function to get current page
* @returns
*/
function getCurrentPage() {
try {
return parseInt(localStorage.getItem(‘currentPage’)) || 1;
} catch (e) {
console.error(‘error @ getCurrentPage’, e);
}
}
/**
* Set the current page to localStorage
* @param {*} page
*/
function setCurrentPage(page) {
try {
localStorage.setItem(‘currentPage’, page);
} catch (e) {
console.error(‘error @ setCurrentPage’, e);
}
}