Level 73
I suggest uploading the file and insert it into the database before doing anything else. That way you candle everything php side just like you would excisting data.
Jan 2, 2023
6
Level 4
Client Side Pagination Using Javascript
Hi, I want to add pagination into my table using simple javascript /jquery. But the problem here is that I'm creating table from excel file on the click of a button means when first time DOM is rendered table is not their at all . Below is the code of converting excel file to table
processButton.addEventListener("click", function () {
console.log("Process button clicked");
if (excel_file.value === "") {
alert("Please select a file");
return false;
}
searchInput.classList.add("toggle-class");
var reader = new FileReader();
reader.readAsArrayBuffer(excel_file.files[0]);
reader.onload = function () {
var data = new Uint8Array(reader.result);
var work_book = XLSX.read(data, { type: "array" });
var sheet_name = work_book.SheetNames;
var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {
header: 1,
});
console.log(sheet_data);
// console.log(sheet_data[9]);
if (sheet_data.length > 0) {
let perPage = 5;
let page = 1;
let total = sheet_data.length;
let totalPages = Math.ceil(total / perPage);
console.log("Total number of records", total);
console.log("Total number of Pages", totalPages);
var table_output = "<table id='pager'>";
for (var row = 0; row < sheet_data.length; row++) {
table_output += "<tr>";
for (var cell = 0; cell < sheet_data[row].length; cell++) {
if (cell == 0) {
table_output +=
"<td class='first-col sticky-col'>" +
sheet_data[row][cell] +
"</td>";
} else {
table_output += "<td>" + sheet_data[row][cell] + "</td>";
}
}
table_output += "</tr>";
}
table_output += "</table>";
document.querySelector(".output_table").innerHTML = table_output;
const data = document.querySelector("table");
console.log("Table data Inside", data);
}
excel_file.value = "";
};
});
Now How I can add pagination to this table . I'm stuck in this portion from couple of days Please help me to solve this Thank you
Level 4
@Tray2 I can do it with backend but I this case I just want to add pagination via client side without interaction with the server side . How I can do this any solution ?
Level 73
@musman_anwar Sure, you need to read everything into memory an object or and array. Something like this.
let items = {
size : 5,
currentPage : 1,
rows : [],
pages : 0
};
function prevPage()
{
if (items.currentPage > 1) {
items.currentPage--;
fetchingtems(items.currentPage);
}
}
function nextPage()
{
items.pages = numPages();
if (items.currentPage < items.pages) {
items.currentPage++;
fetchingItems(items.currentPage);
}
}
function numPages()
{
return Math.ceil(items.rows.length / items.size);
}
function handleButtons(){
items.pages = numPages();
document.querySelector("#current-page").innerHTML = items.currentPage;
document.querySelector("#num-pages").innerHTML = items.pages;
document.querySelector('#btn-prev').disabled = (items.currentPage == 1);
document.querySelector('#btn-next').disabled = (items.currentPage == items.pages);
}
function fetchingItems(page)
{
items.pages = numPages();
let itemHTML = document.querySelector('#list');
itemHTML.innerHTML = '';
if (page < 1)
page = 1;
if (page > items.pages)
page = items.pages;
for (var i = (page-1) *items.size; i < (page * items.size) && i < items.rows.length; i++) {
itemsHTML.innerHTML += '<li><a href="'
+ items.rows[i].target
+'">'
+ items.rows[i].label
+ '</a></li>';
}
handleButtons();
}
Level 4
@Tray2 Where should I add this solution inside the onclick of button or in Global scope ? And what are these #current-page , #num-pages ,#btn-prev and #btn-next ? buttons , spans or divs???
Level 73
@musman_anwar The two first are spans but they don't need to be and the other two are buttons, but they don't need to be that either if you don't want them to be.
Level 73
@musman_anwar The easiest is to add the event to the buttons
<button onclick="prevPage()" value="Back">
<button onclick="nextPage()" value="Forward">
1 like
Please or to participate in this conversation.