Open In App

Create a Pagination Component using HTML CSS and JavaScript

Last Updated : 21 Nov, 2023
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

In this article, we are going to create a pagination component using HTML, CSS, and JavaScript. Websites may need multiple pages to display the items for easier navigation and better user experiences. If you are looking to display large amounts of data on your site, like a blog, charts, or graphs that show information about the same data set, you will surely need to split these data into various pages for improved readability.

Pagination comes to the rescue in such a problem. It is a connected sequence of web pages that have similar content. The content of a section is divided into multiple pages with the help of pagination.

Approach

  • We initialize the constants for “itemsPerPage” and the “totalItems”. We set up variables to keep track of the current page.
  • We create a function to generate the content based on the current page. We also update the HTML content in it.
  • We create a function to generate pagination links and arrow buttons.
  • We attach click-based event listeners to pagination links and arrow buttons. When the pagination link is created, update the current page and update the pagination
  • Now we call the content and pagination function. 

Example: This example illustrates the creation of the Pagination Component using HTML CSS & JavaScript.

HTML




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href="style.css">
    <title>Pagination Example</title>
</head>
  
<body>
    <div class="pagination-container">
        <div id="pagination" 
             class="pagination">
          </div>
        <div id="content" 
             class="content">
          </div>
    </div>
    <script src="script.js"></script>
</body>
  
</html>


CSS




/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #3498db;
}
  
.pagination-container {
    text-align: center;
}
  
.pagination {
    display: inline-block;
    padding: 16px;
}
  
.pagination a {
    color: #fff;
    background-color: #2ecc71;
    border: 1px solid #2ecc71;
    border-radius: 8px;
    padding: 10px 20px;
    margin: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s;
}
  
.pagination a.active {
    background-color: #27ae60;
    border: 1px solid #27ae60;
}
  
.pagination a:hover:not(.active) {
    background-color: #27ae60;
    border: 1px solid #27ae60;
    color: #fff;
}
  
.pagination .arrow {
    font-size: 20px;
    font-weight: bold;
    margin: 0 10px;
    cursor: pointer;
    color: #fff;
}
  
.content {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


Javascript




// script.js
document.addEventListener("DOMContentLoaded", function () {
    const contentDiv = 
        document.getElementById("content");
    const paginationDiv = 
        document.getElementById("pagination");
  
    const itemsPerPage = 3;
    const totalItems = 10;
    let currentPage = 1;
  
    function generateContent(page) {
        contentDiv.innerHTML = "";
        for (let i = (page - 1) * itemsPerPage + 1;
            i <= page * itemsPerPage; i++) {
            contentDiv.innerHTML += `<p>Item ${i}: 
            This is some content for item ${i}.</p>`;
        }
    }
  
    function generatePagination() {
        const totalPages = Math.ceil(totalItems / itemsPerPage);
        paginationDiv.innerHTML = "";
  
        const prevArrow = document.createElement("span");
        prevArrow.className = "arrow";
        prevArrow.textContent = "←";
        prevArrow.addEventListener("click", function () {
            if (currentPage > 1) {
                currentPage--;
                generateContent(currentPage);
                generatePagination();
            }
        });
        paginationDiv.appendChild(prevArrow);
  
        for (let i = 1; i <= totalPages; i++) {
            const link = document.createElement("a");
            link.href = "#";
            link.textContent = i;
  
            if (i === currentPage) {
                link.classList.add("active");
            }
  
            link.addEventListener("click", function () {
                currentPage = i;
                generateContent(currentPage);
                generatePagination();
            });
  
            paginationDiv.appendChild(link);
        }
  
        const nextArrow = document.createElement("span");
        nextArrow.className = "arrow";
        nextArrow.textContent = "→";
        nextArrow.addEventListener("click", function () {
            if (currentPage < totalPages) {
                currentPage++;
                generateContent(currentPage);
                generatePagination();
            }
        });
        paginationDiv.appendChild(nextArrow);
    }
  
    generateContent(currentPage);
    generatePagination();
});


Output:

ezgifcom-video-to-gif-(5)

 



Similar Reads

Create a Pagination using HTML CSS and JavaScript
In this article, we will create a working pagination using HTML, CSS, and JavaScript. Pagination, a widely employed user interface­ pattern, serves the purpose of dividing extensive­ data or content into more manageable­ portions. It allows users the ability to effortle­ssly navigate through numerous content pages, facilitating their search for spe
5 min read
Create Pagination UI Using React And Tailwind CSS
When working with huge data sets in online applications, pagination is an essential feature. It makes a lengthy list of items easier to browse through by dividing them into digestible parts. This article will tell you how to use Tailwind CSS for styling and React for front-end functionality to create a pagination user interface. Prerequisites React
3 min read
How to make a Pagination using HTML and CSS ?
Creating pagination is quite simple, you can easily do that by using Bootstrap, and JavaScript. However, in this article, we will use HTML and CSS to create pagination.  Pagination is helpful when the website contains lots of content on a single page, and a single page will not look good with all those topics together. Few websites use the scroll t
3 min read
How to Create a Transition Effect on Hover Pagination using CSS ?
In web development, pagination is a common feature used to navigate through a large set of data or content. Adding a transition effect on hover to pagination buttons can enhance user interaction and provide visual feedback. ApproachIn this approach, we are going to use CSS transitions. It enables smooth changes in CSS property values over a specifi
1 min read
Pagination Component using React Hooks
Pagination on websites refers to the way of displaying a large set of data in smaller chunks. In React, it's super easy to create a pagination component with the help of the `useEffect` and `useState` hooks. we will create a pagination component using React hooks. Output Preview: Let us have a look at how the final output will look like. Prerequisi
3 min read
How to we create Pagination in Materialize CSS ?
Materialize CSS is a front-end UI library that is created by Google using the combination of HTML, CSS, and JavaScript. It is basically a design language that combines classic design along with modern innovations and technology. The purpose of Google behind developing Materialize CSS is to provide a unified system design for all their products acro
3 min read
React Suite Pagination Component
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Pagination component allows the user to select a specific page from a range of pages. We can use the following approach in ReactJS to use the React Suite Pagination Component. Pagination Props: activePage: It is
3 min read
ReactJS UI Ant Design Pagination Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Pagination Component allows the user to show the page number and switch between pages easily with the next and previous button. We can use the following approach in ReactJS to use the Ant Design Pagination Component. Syntax: <Pagination defaultCurrent={ }
3 min read
ReactJS Evergreen Pagination Component
React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Pagination Component allows the user to navigate between pages. A user can select a specific page from a range of pages. We can use the following approach in ReactJS to use
2 min read
ReactJS Reactstrap Pagination Component
Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Pagination component allows the users to easily switch between pages across a website or app. We can use the following approach in ReactJS to use the ReactJS Reactstrap Pagination Comp
4 min read
Angular ngx bootstrap Pagination Component
Angular ngx bootstrap is a bootstrap framework used with angular to create components with great styling and this framework is very easy to use and is used to make responsive websites. In this article, we will know how to use Pagination in angular ngx bootstrap. Installation syntax: npm install ngx-bootstrap --save Approach: First, install the angu
2 min read
React-Bootstrap Pagination Component
React-Bootstrap is a front-end framework that was designed keeping react in mind. Pagination Component provides a way for users to switch between pages easily. It is basically a set of presentational components for providing a better UI experience to the user. We can use the following approach in ReactJS to use the react-bootstrap Pagination Compon
2 min read
How to use Pagination in DataGrid Component in ReactJS ?
Pagination helps in viewing a segment of data from the assigned data source. Pagination improves the user experience as users can switch between pages to see data. DataGrid Component helps in displaying the information in a grid-like format of rows and columns. We can use the following approach in ReactJS to use Pagination in DataGrid Component. Pr
3 min read
How to use Pagination Component in ReactJS ?
Pagination is a feature through which users can easily switch between pages across a website or app. With the help of this component, a user can select a specific page from a range of pages. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to use the Pagination
2 min read
Angular ng Bootstrap Pagination Component
Angular ng bootstrap is a bootstrap framework used with angular to create components with great styling and this framework is very easy to use and is used to make responsive websites. In this article, we will see how to use Pagination in angular ng bootstrap. Pagination is used to make a group of pages. Installation syntax: ng add @ng-bootstrap/ng-
2 min read
Angular MDBootstrap Pagination Component
MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Pagination Component in Angular MDBootstap. Pagination Component allows the user to navigate data by pages. Syntax: <ul class="pagination">
3 min read
How to Create Pagination in Node.js using Skip and Limit ?
Creating pagination in Node.js using the skip and limit methods. This approach efficiently retrieves specific data subsets from a database, improving performance and user experience by loading content in manageable segments rather than all at once. What is Pagination?Pagination is a very helpful method. This allows the client to fetch data in pages
4 min read
How to Create a Chips Component using HTML CSS & JavaScript ?
In this article, we will see how we can create a chip component with the help of HTML, CSS, and JavaScript. In a chip component, there are basically two sections: one is the content section, and the other is the cross-button section. Both should be under one container with a proper border-radius. Preview Image: PrerequisitesHTMLCSSJavaScriptApproac
3 min read
How to Change the Size of the Pagination using CSS ?
Pagination is an important user interface component that enables navigation through a set of pages. We can customize this element by adjusting its size. These are the two different approaches to customize and change the pagination size using CSS: Table of Content Using font-size PropertyUsing ScalingUsing font-size PropertyIn this approach, we are
3 min read
How to Add Hoverable Pagination using CSS ?
Pagination is a common technique for controlling content that covers multiple pages. Hoverable pagination provides a sleek alternative to traditional pagination styles by enabling users to preview the content without clicking by hovering over the pagination elements. Traditional pagination styles require users to click through numbered links to nav
2 min read
How to create pagination in Bootstrap 4 ?
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compatibility issue. Pagination is an element used to ind
5 min read
CSS Pagination
Pagination is the process of dividing the document into pages and providing them with numbers. Types of Pagination: There are many types of pagination in CSS. Some of them are given below: Simple PaginationActive and Hoverable PaginationRounded Active and Hoverable ButtonsHoverable Transition EffectBordered PaginationRounded Border PaginationCenter
7 min read
Primer CSS Previous/Next Pagination
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
Materialize CSS Pagination
Pagination is used to separate the content into discrete pages that is short and easy to understand. Materialize CSS provide classes to create a pagination bar that holds the links to the other pages. The pagination class is used to set the <ul> list element as a pagination component. The pages that have to be shown are defined inside this co
2 min read
Foundation CSS Kitchen Sink Pagination
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler
2 min read
Foundation CSS Pagination Basics
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
2 min read
Foundation CSS Pagination Centered
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
2 min read
Foundation CSS Pagination
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler
3 min read
Primer CSS Numbered Pagination
Primer CSS is open-source on Github that is created with GitHub’s design system. We can use Primer CSS by installing it via npm or include the CDN link in our HTML file. It has different types of styles like spacing, color, and typography. Primer CSS Pagination is used to jump to any related page using the link. Primer CSS Numbered Pagination is us
2 min read
Primer CSS Pagination
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
three90RightbarBannerImg