Last active
March 12, 2024 08:45
-
-
Save arturo-source/c28e1fc4a57912591b3902cf17a15562 to your computer and use it in GitHub Desktop.
Simple pagination JS script. Paginator class is 100 lines of JavaScript code to paste into your project and easily handle an array of elements.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Paginator { | |
| constructor({ | |
| elements, | |
| cellsPerRow = 5, | |
| rowsPerPage = 4, | |
| renderFunc, | |
| prevBtn, | |
| nextBtn, | |
| firstBtn, | |
| lastBtn, | |
| }) { | |
| this.elements = elements; | |
| this.currentPage = 0; | |
| this.cellsPerRow = cellsPerRow; | |
| this.rowsPerPage = rowsPerPage; | |
| this.renderFunc = renderFunc; | |
| this.prevBtn = prevBtn; | |
| this.nextBtn = nextBtn; | |
| this.firstBtn = firstBtn; | |
| this.lastBtn = lastBtn; | |
| if (this.prevBtn != undefined) | |
| this.prevBtn.onclick = () => this.goToPrevPage(); | |
| if (this.nextBtn != undefined) | |
| this.nextBtn.onclick = () => this.goToNextPage(); | |
| if (this.firstBtn != undefined) | |
| this.firstBtn.onclick = () => this.goToFirstPage(); | |
| if (this.lastBtn != undefined) | |
| this.lastBtn.onclick = () => this.goToLastPage(); | |
| } | |
| render() { | |
| if (this.currentPage == 0) { | |
| this.prevBtn?.setAttribute("disabled", ""); | |
| this.firstBtn?.setAttribute("disabled", ""); | |
| } else { | |
| this.prevBtn?.removeAttribute("disabled", ""); | |
| this.firstBtn?.removeAttribute("disabled", ""); | |
| } | |
| if (this.currentPage == this.lastPage || this.lastPage == 0) { | |
| this.nextBtn?.setAttribute("disabled", ""); | |
| this.lastBtn?.setAttribute("disabled", ""); | |
| } else { | |
| this.nextBtn?.removeAttribute("disabled", ""); | |
| this.lastBtn?.removeAttribute("disabled", ""); | |
| } | |
| this.renderFunc(this.currentElements); | |
| } | |
| getCurrentPageInfo(messageGeneratorFunc) { | |
| return messageGeneratorFunc({ | |
| count: this.cellsPerPage, | |
| curr: this.currentPage + 1, | |
| last: this.lastPage + 1, | |
| }); | |
| } | |
| goToPrevPage() { | |
| if (this.currentPage > 0) { | |
| this.currentPage--; | |
| this.render(); | |
| } | |
| } | |
| goToNextPage() { | |
| if (this.currentPage < this.lastPage) { | |
| this.currentPage++; | |
| this.render(); | |
| } | |
| } | |
| goToFirstPage() { | |
| this.currentPage = 0; | |
| this.render(); | |
| } | |
| goToLastPage() { | |
| this.currentPage = this.lastPage; | |
| this.render(); | |
| } | |
| get cellsPerPage() { | |
| return this.rowsPerPage * this.cellsPerRow; | |
| } | |
| get lastPage() { | |
| return Math.floor(this.elements.length / this.cellsPerPage); | |
| } | |
| get currentElements() { | |
| let next_pos = this.currentPage * this.cellsPerPage; | |
| let table = Array(this.rowsPerPage).fill(Array()); | |
| for (const i in table) { | |
| table[i] = Array(this.cellsPerRow); | |
| } | |
| for (let i = 0; i < this.rowsPerPage; i++) { | |
| for (let j = 0; j < this.cellsPerRow; j++) { | |
| if (next_pos < this.elements.length) { | |
| table[i][j] = this.elements[next_pos]; | |
| next_pos++; | |
| } | |
| } | |
| } | |
| return table; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- necessary html headers --> | |
| <script src="./pagination.js"></script> | |
| </head> | |
| <body> | |
| <div class="tablecontainer"> | |
| <h1 id="msg"></h1> | |
| <table id="maintable"></table> | |
| </div> | |
| <div class="inputscontainer"> | |
| <button class="btn" id="first">First</button> | |
| <button class="btn" id="prev">Previous</button> | |
| <button class="btn" id="next">Next</button> | |
| <button class="btn" id="last">Last</button> | |
| </div> | |
| </body> | |
| <script> | |
| function renderTable(currentElements) { | |
| // Example of render... | |
| let tableContent = "<tr>"; | |
| for (const row of currentElements) { | |
| for (const cell of row) { | |
| tableContent += `<td>${cell == undefined ? ' ' : cell}</td>`; | |
| } | |
| tableContent += "</tr><tr>"; | |
| } | |
| tableContent += "</tr>"; | |
| document.getElementById("maintable").innerHTML = tableContent; | |
| } | |
| window.onload = () => { | |
| let prevBtn = document.getElementById("prev"); // Introduce btn ID | |
| let nextBtn = document.getElementById("next"); // Introduce btn ID | |
| let firstBtn = document.getElementById("first"); // Introduce btn ID | |
| let lastBtn = document.getElementById("last"); // Introduce btn ID | |
| var paginator = new Paginator({ | |
| elements: [2, 3, 65, "sd", "dfo", "95j", 3], | |
| cellsPerRow: 5, | |
| rowsPerPage: 4, | |
| renderFunc: renderTable, // renderFunc must be a func that receives elements to render | |
| prevBtn: prevBtn, | |
| nextBtn: nextBtn, | |
| firstBtn: firstBtn, | |
| lastBtn: lastBtn, | |
| }); | |
| var currentElements = paginator.currentElements; | |
| var currentPage = paginator.currentPage; | |
| var lastPage = paginator.lastPage; | |
| var pageInfo = paginator.getCurrentPageInfo(({count, curr, last}) => `${count} items | Page ${curr} of ${last}`); | |
| }; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment