JavaScript Pagination: How to implement it?

Quick Summary

In a website, pagination divides a text block into easily viewable pages. Additionally, it makes the information more accessible to read and assists in loading data from a server. Through the utilization of pagination, you can select just to load a particular quantity of things each time the consumer decides to examine them. This helps save time by reducing the information displayed on a page.

JavaScript pagination can offer several advantages to a website or application, including the following:

First, it enables you to divide enormous volumes of content into more digestible bits, making it more straightforward for users to traverse the site and get the required information. Users are less likely to become overwhelmed or frustrated as a result of this, which can lead to an improvement in the user experience and engagement.

In addition, it can decrease the time it takes for a page to load by loading only a portion of the material at a time, which can improve the overall performance and speed of the website. The significance of this must be considered, particularly for mobile users who could have a restricted bandwidth or slower connections.

The last benefit is that it lets you dynamically update content without requiring a page reload time. A user experience that is smoother and more seamless can be created as a result of this. In general, Simple pagination in JavaScript is a strong tool that can improve the usability of a website or application and its performance and user engagement.

Examples of pagination

When it comes to creating pagination, JavaScript offers some different alternatives, including client-side and server-side approaches.

• A restricted number of items are rendered on the page through client-side pagination, including providing navigation controls between pages. When dealing with smaller datasets, this method is quick and effective, but when dealing with larger datasets, it may be slow.
• On the other hand, server-side pagination entails retrieving a certain subset of data from the server because the current page number and the number of items per page are both considered. This method is better suited for databases that include more information, but it calls for additional server resources.

Among the many popular pagination libraries available for use in JavaScript, DataTables, React-Paginate, and Bootstrap Pagination are many examples. 

How to implement pagination using JavaScript?

HTML markup

Copy Code

<div id="items">

  <ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

    <li>Item 5</li>

    <li>Item 6</li>

    <li>Item 7</li>

    <li>Item 8</li>

    <li>Item 9</li>

    <li>Item 10</li>

  </ul>

</div>

<div id="pagination" class="pagination-container"></div>

The HTML markup will contain a list of items and a container for the pagination controls. The HTML will look something like this:

CSS styling

We will be utilizing CSS to style the pagination controls and list items. Check out this basic CSS styling example:

Copy Code

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}

li {

padding: 10px;

border: 1px solid #ccc;

margin-bottom: 10px;

}

.pagination-container {

display: flex;

justify-content: center;

align-items: center;

margin-top: 20px;

}

.pagination {

display: inline-flex;

border-radius: 5px;

overflow: hidden;

}

.pagination a {

color: black;

padding: 8px 16px;

text-decoration: none;

border: 1px solid #ddd;

border-right: none;

background-color: #f1f1f1;

transition: background-color 0.3s ease-in-out;

}

.pagination a:first-child {

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

}

.pagination a:last-child {

border-right: 1px solid #ddd;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

}

.pagination a.active {

background-color: #4caf50;

color: white;

border: none;

}

.pagination a:hover:not(.active) {

background-color: #ddd;

}

JavaScript Logic for Pagination

JavaScript will be used in order to implement the pagination feature. The pagination controls will be displayed via a function created called paginate(). An array of items, the number of items displayed on each page, and the container element will be passed to this function. The function will generate and show the pagination controls, and the items it presents will change based on the currently selected page.

Copy Code

function paginate(items, itemsPerPage, paginationContainer) {

  let currentPage = 1;

  const totalPages = Math.ceil(items.length / itemsPerPage);

function showItems(page) {

const startIndex = (page - 1) * itemsPerPage;

const endIndex = startIndex + itemsPerPage;

const pageItems = items.slice(startIndex, endIndex);

const itemsContainer = document.querySelector("#items");

itemsContainer.innerHTML = "";

pageItems.forEach((item) => {

  const li = document.createElement("li");

  li.innerText = item;

  itemsContainer.appendChild(li);

});

}

function setupPagination() {

const pagination = document.querySelector(paginationContainer);

pagination.innerHTML = "";

for (let i = 1; i <= totalPages; i++) {

  const link = document.createElement("a");

  link.href = "#";

  link.innerText = i;

  if (i === currentPage) {

    link.classList.add("active");

  }

  link.addEventListener("click", (event) => {

    event.preventDefault();

    currentPage = i;

    showItems(currentPage);

    const currentActive = pagination.querySelector(".active");

    currentActive.classList.remove("active");

    link.classList.add("active");

  });

  pagination.appendChild(link);

}

}

showItems(currentPage);

setupPagination();

}

We’ll test the pagination functionality by calling the paginate() function with an array of items, the number of items per page, and the container element to display the pagination controls.

Let’s call the paginate() function with some sample data.

Copy Code

const items = [

"Item 1",

"Item 2",

"Item 3",

"Item 4",

"Item 5",

"Item 6",

"Item 7",

"Item 8",

"Item 9",

"Item 10",

"Item 11",

"Item 12",

"Item 13",

"Item 14",

"Item 15",

"Item 16",

"Item 17",

"Item 18",

"Item 19",

"Item 20",

"Item 21",

"Item 22",

"Item 23",

"Item 24",

"Item 25",

"Item 26",

"Item 27",

"Item 28",

"Item 29",

"Item 30",

"Item 31",

"Item 32",

"Item 33",

"Item 34",

"Item 35",

];

const itemsPerPage = 5;

const paginationContainer = "#pagination";

paginate(items, itemsPerPage, paginationContainer);

The code that was just shown to us will run and display the first page of items along with pagination controls.

You can experiment with different page navigation by clicking on the pagination controls to see how the displayed content changes.

Conclusion

The following steps can be used to implement pagination in JavaScript:

• Make an array with the items that will be paginated or obtain the data using an application programming interface (API). Ascertain the total number of pages and the number of things to be presented on each page separately.
• Use your HTML to create dynamic pagination controls, including previous, following, and page numbers. Put in place logic that will show the selection of items pertinent to the page now being visited.
• The user interface (UI) should be updated, and user interactions should be managed to ensure visitors enjoy a seamless browsing experience.
• Pagination enhances the user experience by breaking up content into smaller, more understandable chunks, speeding up load times, and simplifying navigating through massive databases.

JavaScript pagination revolutionizes content delivery, improving load times and simplifying navigation with Software Development Company Tagline Infotech and elevating your website’s usability with Tagline Infotech!

FAQ’S