whatsapp_btn
whatsapp_btn Chat With Us

Home >> JavaScript >> JavaScript Pagination: How to implement it?

JavaScript Pagination: How to implement it?

  7 min read
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


<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:


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.


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.


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

The following steps can be used to create a simple pagination: You should decide how many things you want on each page. Divide the total number of items by the number on each page to get the total number of pages. You should create navigation controls like "previous" and "next" buttons so that users may move between pages. Use JavaScript to dynamically load and display the items related to the currently shown page.

Pagination can be successfully built without using any third-party frameworks or libraries. Using HTML/CSS and standard JavaScript to achieve primary pagination goals is sufficient. However, there is a chance that pagination libraries like pagination.js and simplePagination.js will add more capabilities while making the process easier.

To collect data about user actions, event listeners can be added to pagination controls, like the previous and next buttons. When a user clicks one of the controls, the items should refresh, and the current page should be modified accordingly.

Tagline Infotech
Tagline Infotech a well-known provider of IT services, is deeply committed to assisting other IT professionals in all facets of the industry. We continuously provide comprehensive and high-quality content and products that give customers a strategic edge and assist them in improving, expanding, and taking their business to new heights by using the power of technology. You may also find us on LinkedIn, Instagram, Facebook and Twitter.

Related Posts :

contact-us-bg

Our Global Presence

India

Surat (HQ)

Digital Valley, 423, Apple Square, beside Lajamni Chowk, Mota Varachha, Surat, Gujarat 394101

Ahmedabad

D-401, titanium city center, 100 feet anand nagar road, Ahmedabad-380015

 +91 9913 808 285

U.S.A

1133 Sampley Ln Leander, Texas, 78641

United Kingdom

52 Godalming Avenue, wallington, London - SM6 8NW

U.A.E

Office No - 43-44, Al Fahidi, Bur Dubai, Dubai, United Arab Emirates

 +971 58 569 4786