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

Accepted 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.

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

+1

Raj Bhatt3y ago

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

0

Rajkiran Swain3y ago

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:
```
  
```
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 <= endIndex) ? '' : 'none';
    }
  });
  
  updatePagination();
}

function updatePagination() {
  const totalPages = Math.ceil((tableRows.length - 1) / pageSize);
  
  paginationContainer.innerHTML = '';
  
  for (let i = 1; i <= totalPages; i++) {
    const link = document.createElement('a');
    link.href = '#';
    link.textContent = i;
    link.classList.toggle('active', i === currentPage);
    link.addEventListener('click', event => {
      event.preventDefault();
      currentPage = i;
      updateTable();
    });
    paginationContainer.appendChild(link);
  }
}

pageSizeSelect.addEventListener('change', event => {
  pageSize = Number(event.target.value);
  currentPage = 1;
  updateTable();
});

updateTable();

+1

Vishal Yelve3y ago

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

0