How to add pagination to an existing html table using java script?

Question

Hello everyone, Can anyone help me to add pagination to an existing html table using javascript with pervious and next button and all page number?

Amit Mohanty · Answer

Check this example of how to add pagination to an existing HTML table using JavaScript. Add a div for pagination to your code. ID User Date Status Reason 183 John Doe 11-7-2014 Approved Bacon ipsum dolor sit amet salami venison chicken flank fatback doner. 219 Alexander Pierce 11-7-2014 Pending Bacon ipsum dolor sit amet salami venison chicken flank fatback doner. Script to initialize the pagination const table = document.getElementById('table1'); const paginationContainer = document.getElementById('pagination'); const rowsPerPage = 10; // Change this to set the number of rows per page let displayPageNo = 1; const totalRows = table.tBodies[0].rows.length; const numPages = Math.ceil(totalRows / rowsPerPage); function paginate() { // Create pagination buttons const pageNumbers = document.createElement('ul'); pageNumbers.classList.add("pagination", "pagination-month", "justify-content-center"); const prevList = document.createElement('li'); prevList.classList.add("page-item"); prevList.id = "prevPage"; const prevAnchor = document.createElement('a'); prevAnchor.classList.add("page-link"); prevAnchor.href = "javascript::"; prevAnchor.innerText = "«"; prevAnchor.addEventListener('click', () => { displayPage(displayPageNo - 1); }); prevList.appendChild(prevAnchor); pageNumbers.appendChild(prevList); for (let i = 1; i { displayPage(i); }); const paragraph = document.createElement('p'); paragraph.classList.add("page-month"); paragraph.innerText = i; anchor.appendChild(paragraph); list.appendChild(anchor); pageNumbers.appendChild(list); } const nextList = document.createElement('li'); nextList.classList.add("page-item"); nextList.id = "nextPage"; const nextAnchor = document.createElement('a'); nextAnchor.classList.add("page-link"); nextAnchor.href = "javascript::"; nextAnchor.innerText = "»"; nextAnchor.addEventListener('click', () => { displayPage(displayPageNo + 1); }); nextList.appendChild(nextAnchor); pageNumbers.appendChild(nextList); paginationContainer.appendChild(pageNumbers); displayPage(1); } function displayPage(pageNum) { const start = (pageNum - 1) * rowsPerPage; const end = start + rowsPerPage; const rows = table.tBodies[0].rows; const listPrev = document.getElementById('prevPage'); const listNext = document.getElementById('nextPage'); displayPageNo = pageNum; if (pageNum == numPages) { listNext.classList.add("page-item", "disabled"); listPrev.classList.remove("disabled"); } else if (pageNum == 1) { listNext.classList.remove("disabled"); listPrev.classList.add("page-item", "disabled"); } else { listNext.classList.remove("disabled"); listPrev.classList.remove("disabled"); } // Hide all rows for (let i = 0; i

Rajkiran Swain · Answer

Here is a basic example of how to add pagination to an existing HTML table using JavaScript: Add a container for the pagination links and a select element for the page size: 5 10 20 Add a script to initialize the pagination: const table = document.querySelector('#my-table'); const tableRows = table.querySelectorAll('tr'); const pageSizeSelect = document.querySelector('#page-size-select'); const paginationContainer = document.querySelector('#pagination-container'); let currentPage = 1; let pageSize = Number(pageSizeSelect.value); function updateTable() { const startIndex = (currentPage - 1) * pageSize; const endIndex = startIndex + pageSize; tableRows.forEach((row, index) => { if (index > 0) { // skip header row row.style.display = (index > startIndex && index { event.preventDefault(); currentPage = i; updateTable(); }); paginationContainer.appendChild(link); } } pageSizeSelect.addEventListener('change', event => { pageSize = Number(event.target.value); currentPage = 1; updateTable(); }); updateTable();

Vishal Yelve · Answer

Hi Deepak, Do refer below links https://getbutterfly.com/client-side-html-pagination-with-javascript/ https://stackoverflow.com/questions/19605078/how-to-use-pagination-on-html-tables

Raj Bhatt · Answer

Hi , You can Try Below Example Employee ID Name Position Department Salary 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 001 John Smith Manager Sales 100,000 002 Jane Doe Engineer Research & Development 85,000 003 Bob Johnson Supervisor Manufacturing 75,000 const table = document.getElementById('my-table'); const tableRows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); const rowsPerPage = 10; const totalPages = Math.ceil(tableRows.length / rowsPerPage); function showPage(pageNumber) { const startIndex = (pageNumber - 1) * rowsPerPage; const endIndex = startIndex + rowsPerPage - 1; for (let i = 0; i if (i endIndex) { tableRows[i].style.display = 'none'; } else { tableRows[i].style.display = ''; } } } function createPaginationControls() { for (let i = 1; i const button = document.createElement('button'); button.innerText = i; button.addEventListener('click', () => showPage(i)); document.getElementById('pagination-controls').appendChild(button); } } createPaginationControls(); showPage(1);

How to add pagination to an existing html table using java script?

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)