Pagination in JavaScript

Pagination Methods  

Pagination can be implemented in different ways depending on the complexity of your project. We’ll start with a simple method & then move to a more advanced one. Let’s begin with the basics.

Method 1: Basic Pagination  

Basic pagination is the simplest way to split data into pages. It’s ideal for small datasets or when you’re just starting with pagination. Let’s see how it works:  

1. Divide the Data: You split your data into smaller chunks (pages).  
 

2. Display One Page at a Time: Show only one chunk of data to the user.  
 

3. Add Navigation Buttons: Provide buttons like “Next” & “Previous” to move between pages.  
 

Let’s create a basic pagination example using JavaScript. We’ll use an array of data & display it page by page.  

Step-by-Step Code Example  

1. HTML Structure: Create a simple layout for displaying data & pagination buttons.  

<div id="data-container"></div>
<div id="pagination-controls">
  <button id="prev-btn">Previous</button>
  <span id="page-info"></span>
  <button id="next-btn">Next</button>
</div>

2. JavaScript Logic: Write the logic to handle pagination.  

// Sample data (an array of items)
const data = [
  "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", 
  "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"
];

// Pagination settings
const itemsPerPage = 3; // Number of items to show per page
let currentPage = 1;    // Current page number

// Function to display data for the current page
function displayData(page) {
  const startIndex = (page - 1)  itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const pageData = data.slice(startIndex, endIndex);

  // Display the data
  const dataContainer = document.getElementById("data-container");
  dataContainer.innerHTML = pageData.map(item => `<div>${item}</div>`).join("");
}
// Function to update pagination controls
function updatePaginationControls() {
  const pageInfo = document.getElementById("page-info");
  pageInfo.textContent = `Page ${currentPage} of ${Math.ceil(data.length / itemsPerPage)}`;

  // Enable/disable buttons based on the current page
  const prevBtn = document.getElementById("prev-btn");
  const nextBtn = document.getElementById("next-btn");
  prevBtn.disabled = currentPage === 1;
  nextBtn.disabled = currentPage === Math.ceil(data.length / itemsPerPage);
}
// Event listeners for pagination buttons
document.getElementById("prev-btn").addEventListener("click", () => {
  if (currentPage > 1) {
    currentPage--;
    displayData(currentPage);
    updatePaginationControls();
  }
});

document.getElementById("next-btn").addEventListener("click", () => {
  if (currentPage < Math.ceil(data.length / itemsPerPage)) {
    currentPage++;
    displayData(currentPage);
    updatePaginationControls();
  }
});


// Initial display
displayData(currentPage);
updatePaginationControls();

In this Code  

1. Data Array: We have an array of 10 items. This could be any data, like blog posts or product names.  
 

2. Items Per Page: We decide how many items to show on each page. Here, it’s set to 3.  
 

3. Display Function: The `displayData` function calculates which items to show based on the current page.  
 

4. Pagination Controls: The `updatePaginationControls` function updates the page info & disables buttons when needed.  
 

5. Event Listeners: Buttons allow users to navigate between pages.  

Method 2: Advanced Pagination  

Advanced pagination is used when you have a large dataset or need more control over how data is displayed. Unlike basic pagination, advanced pagination often involves fetching data dynamically (e.g., from an API) & handling more complex user interactions.  

In this example, we’ll create a pagination system that:  
 

1. Fetches data from an API (or simulates it).  
 

2. Dynamically generates pagination buttons (e.g., 1, 2, 3, …).  
 

3. Allows users to jump to any page directly.  

Let’s take a Step-by-Step Code Example  

1. HTML Structure: Create a layout for displaying data & dynamic pagination buttons.  

<div id="data-container"></div>
<div id="pagination-controls"></div>

2. JavaScript Logic: Write the logic to handle dynamic pagination.  

// Simulated data (could be fetched from an API)
const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);

// Pagination settings
const itemsPerPage = 5; // Number of items to show per page
let currentPage = 1;    // Current page number

// Function to display data for the current page
function displayData(page) {
  const startIndex = (page - 1)  itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const pageData = data.slice(startIndex, endIndex);

 // Display the data
  const dataContainer = document.getElementById("data-container");
  dataContainer.innerHTML = pageData.map(item => `<div>${item}</div>`).join("");
}

// Function to generate pagination buttons
function generatePaginationButtons() {
  const totalPages = Math.ceil(data.length / itemsPerPage);
  const paginationControls = document.getElementById("pagination-controls");

 // Clear existing buttons
  paginationControls.innerHTML = "";

 // Create "Previous" button
  const prevButton = document.createElement("button");
  prevButton.textContent = "Previous";
  prevButton.disabled = currentPage === 1;
  prevButton.addEventListener("click", () => {
    if (currentPage > 1) {
      currentPage--;
      displayData(currentPage);
      generatePaginationButtons();
    }
  });
  paginationControls.appendChild(prevButton);

 // Create numbered buttons
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement("button");
    button.textContent = i;
    button.disabled = i === currentPage;
    button.addEventListener("click", () => {
      currentPage = i;
      displayData(currentPage);
      generatePaginationButtons();
    });
    paginationControls.appendChild(button);
  }

 // Create "Next" button
  const nextButton = document.createElement("button");
  nextButton.textContent = "Next";
  nextButton.disabled = currentPage === totalPages;
  nextButton.addEventListener("click", () => {
    if (currentPage < totalPages) {
      currentPage++;
      displayData(currentPage);
      generatePaginationButtons();
    }
  });
  paginationControls.appendChild(nextButton);
}

// Initial display
displayData(currentPage);
generatePaginationButtons();

In this Code  

1. Simulated Data: We use an array of 50 items to simulate a larger dataset. In real-world applications, this data could come from an API.  
 

2. Items Per Page: We set the number of items to display per page (5 in this case).  
 

3. Display Function: The `displayData` function shows the items for the current page.  
 

4. Dynamic Buttons: The `generatePaginationButtons` function creates buttons for each page. It also updates the “Previous” & “Next” buttons based on the current page. 
 

5. Event Listeners: Clicking a numbered button takes the user directly to that page.  

Why Use Advanced Pagination?  

• Scalability: Works well with large datasets.  
   
• User Experience: Allows users to jump to any page directly.  
   
• Flexibility: Can be adapted to fetch data dynamically from APIs.  

Approach to Create Pagination with HTML, CSS, and JavaScript

To implement pagination, we will:

1. Create a basic structure with HTML: Define a container to display data and navigation buttons.
    
2. Style the elements using CSS: Design the layout for a clean and user-friendly interface.
    
3. Add functionality with JavaScript: Write logic to display specific items per page and handle navigation.

Example

HTML Structure

Here is the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagination Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Pagination Example</h1>
        <ul id="data-list">
            <!-- Dynamic content will be inserted here -->
        </ul>
        <div id="pagination-controls">
            <!-- Pagination buttons will be inserted here -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling

Add styles to make the interface visually appealing. Save the following CSS code in a file named styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
}
.container {
    width: 90%;
    max-width: 600px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
    text-align: center;
    margin-bottom: 20px;
}


#data-list {
    list-style: none;
    padding: 0;
    margin: 0;
}


#data-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}


#pagination-controls {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}


#pagination-controls button {
    margin: 0 5px;
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}


#pagination-controls button:hover {
    background-color: #0056b3;
}


#pagination-controls button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

JavaScript Logic

Add the following JavaScript code in a file named script.js:

// Sample data
const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);

// Pagination variables
const itemsPerPage = 5;
let currentPage = 1;

// DOM elements
const dataList = document.getElementById('data-list');
const paginationControls = document.getElementById('pagination-controls');

// Function to render data
function renderData(page) {
    dataList.innerHTML = '';
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const itemsToDisplay = data.slice(start, end);

    itemsToDisplay.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        dataList.appendChild(li);
    });
}

// Function to render pagination buttons
function renderPagination() {
    paginationControls.innerHTML = '';
    const totalPages = Math.ceil(data.length / itemsPerPage);

    // Previous button
    const prevButton = document.createElement('button');
    prevButton.textContent = 'Previous';
    prevButton.disabled = currentPage === 1;
    prevButton.addEventListener('click', () => {
        currentPage--;
        updatePagination();
    });
    paginationControls.appendChild(prevButton);

    // Next button
    const nextButton = document.createElement('button');
    nextButton.textContent = 'Next';
    nextButton.disabled = currentPage === totalPages;
    nextButton.addEventListener('click', () => {
        currentPage++;
        updatePagination();
    });
    paginationControls.appendChild(nextButton);
}

// Update pagination and data display
function updatePagination() {
    renderData(currentPage);
    renderPagination();
}
// Initialize
updatePagination();

Explanation

1. Data Generation: A sample dataset of 50 items is created using Array.from() for demonstration purposes.
    
2. Pagination Variables: The itemsPerPage determines how many items are shown per page. The currentPage tracks the current page number.
    
3. Render Functions:
   • renderData(): Displays the current page’s items in the #data-list container.
      
   • renderPagination(): Adds "Previous" and "Next" buttons and handles their states (enabled/disabled).
      
4. Event Listeners: The "Previous" and "Next" buttons update the currentPage and trigger the updatePagination() function.
    
5. Initialization: The updatePagination() function initializes the display.

Output

When you open the HTML file in a browser, you will see a paginated list of items with navigation buttons. Clicking "Next" or "Previous" navigates through the dataset seamlessly.

Frequently Asked Questions

What is the purpose of pagination in JavaScript? 

Pagination helps divide large datasets into smaller, more manageable chunks, improving user experience by reducing load time and making navigation easier.

How do you handle large datasets with pagination? 

You can use server-side pagination to fetch only the required data for each page, reducing the load on the browser and improving performance.

Can pagination be implemented without JavaScript? 

Yes, pagination can be implemented server-side using frameworks like PHP, Python, or Ruby. However, JavaScript allows for dynamic and interactive client-side pagination.

Conclusion

In this article, we discussed how to implement pagination in JavaScript with HTML and CSS. This technique is essential for enhancing user experience when dealing with large datasets. The example demonstrated how to create a dynamic pagination system that is easy to customize and integrate into your projects.