How To Pagination In Javascript

In this blog post, we will learn how to create a simple pagination system using JavaScript. Pagination is an essential feature for any web application that deals with large datasets, as it allows users to navigate through the data easily and efficiently.

Prerequisites

To follow this tutorial, you should have basic knowledge of HTML, CSS, and JavaScript. No external libraries are required, and we will use vanilla JavaScript for this example.

Getting Started

First, let’s create a simple HTML table to display our data. For this tutorial, we will use an array of objects to represent our data. Add the following code to your HTML file:

<table id="data-table" class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Next, let’s create an array of objects to represent our sample data:

const data = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Doe', email: '[email protected]' },
  // ... more data
];

Creating the Pagination Function

Now that we have our data and table set up, we can create a function to handle the pagination logic. The function will have three parameters:

• data: the data array to be paginated
• pageSize: the number of items to display per page
• currentPage: the current page number

Here is the code for our pagination function:

function paginate(data, pageSize, currentPage) {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return data.slice(startIndex, endIndex);
}

Rendering the Paginated Data

Now that we have our pagination function, we can use it to render the paginated data into our HTML table. Add the following code to your JavaScript file:

function renderTable(data, pageSize, currentPage) {
  const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
  tableBody.innerHTML = '';

  const paginatedData = paginate(data, pageSize, currentPage);
  
  paginatedData.forEach(item => {
    const row = tableBody.insertRow();
    row.innerHTML = `
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.email}</td>
    `;
  });
}

// Example usage:
renderTable(data, 5, 1);

Creating the Pagination Controls

Finally, let’s create the pagination controls (previous, next, and page numbers) to allow users to navigate through the paginated data. Add the following HTML code below your table:

<nav>
  <ul id="pagination-controls" class="pagination"></ul>
</nav>

Next, add the following JavaScript code to create the pagination controls:

function createPaginationControls(data, pageSize, currentPage) {
  const totalPages = Math.ceil(data.length / pageSize);
  const paginationControls = document.getElementById('pagination-controls');

  paginationControls.innerHTML = '';

  // Create previous button
  const previousButton = document.createElement('li');
  previousButton.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
  previousButton.innerHTML = '<a class="page-link" href="#">Previous</a>';
  previousButton.onclick = () => {
    if (currentPage > 1) {
      updateTableAndControls(currentPage - 1);
    }
  };
  paginationControls.appendChild(previousButton);

  // Create page number buttons
  for (let i = 1; i <= totalPages; i++) {
    const pageButton = document.createElement('li');
    pageButton.className = 'page-item' + (i === currentPage ? ' active' : '');
    pageButton.innerHTML = `<a class="page-link" href="#">${i}</a>`;
    pageButton.onclick = () => updateTableAndControls(i);
    paginationControls.appendChild(pageButton);
  }

  // Create next button
  const nextButton = document.createElement('li');
  nextButton.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
  nextButton.innerHTML = '<a class="page-link" href="#">Next</a>';
  nextButton.onclick = () => {
    if (currentPage < totalPages) {
      updateTableAndControls(currentPage + 1);
    }
  };
  paginationControls.appendChild(nextButton);
}

function updateTableAndControls(newPage) {
  renderTable(data, 5, newPage);
  createPaginationControls(data, 5, newPage);
}

// Example usage:
createPaginationControls(data, 5, 1);

Conclusion

In this tutorial, we learned how to create a simple pagination system using JavaScript. You can now apply these techniques to your own web applications to provide a better user experience when dealing with large datasets. Happy coding!