W3.CSS Pagination

Welcome to The Coding College, your hub for web development knowledge. In this tutorial, we’ll cover how to create beautiful and functional pagination using W3.CSS. Pagination is essential for organizing content across multiple pages, providing a better user experience for websites with large datasets or articles.

Why Use W3.CSS for Pagination?

  1. Predefined Classes: Simplifies design and implementation.
  2. Customizable: Adapt styles to fit your website’s branding.
  3. Responsive Design: Looks great on all screen sizes.
  4. Lightweight: Boosts performance with minimal CSS overhead.

1. Basic Pagination

Here’s a basic example of a pagination bar:

<div class="w3-bar w3-border">
  <a href="#" class="w3-bar-item w3-button">«</a>
  <a href="#" class="w3-bar-item w3-button">1</a>
  <a href="#" class="w3-bar-item w3-button">2</a>
  <a href="#" class="w3-bar-item w3-button">3</a>
  <a href="#" class="w3-bar-item w3-button">»</a>
</div>

Features

  • w3-bar: Creates a horizontal bar for pagination.
  • w3-bar-item: Styles each item in the pagination bar.
  • Navigation Symbols: Use « and » for “Previous” and “Next” links.

2. Active Page Indicator

Highlight the active page for better user navigation.

<div class="w3-bar w3-border">
  <a href="#" class="w3-bar-item w3-button">«</a>
  <a href="#" class="w3-bar-item w3-button w3-light-grey">1</a>
  <a href="#" class="w3-bar-item w3-button w3-blue">2</a>
  <a href="#" class="w3-bar-item w3-button">3</a>
  <a href="#" class="w3-bar-item w3-button">»</a>
</div>

Explanation

  • w3-light-grey: Use this class for unselected pages.
  • w3-blue: Highlights the active page for better visibility.

3. Responsive Pagination

Make pagination responsive for mobile devices.

<div class="w3-bar w3-border w3-center">
  <a href="#" class="w3-bar-item w3-button w3-hide-small">«</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">1</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">2</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">3</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">»</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-large w3-hide-medium">Next</a>
</div>

Features

  • w3-hide-small: Hides full pagination on smaller screens.
  • w3-hide-large & w3-hide-medium: Displays a simplified “Next” button for mobile devices.

4. Pagination with Disabled Buttons

Disable navigation buttons when appropriate.

<div class="w3-bar w3-border">
  <a href="#" class="w3-bar-item w3-button w3-disabled">«</a>
  <a href="#" class="w3-bar-item w3-button w3-blue">1</a>
  <a href="#" class="w3-bar-item w3-button">2</a>
  <a href="#" class="w3-bar-item w3-button">3</a>
  <a href="#" class="w3-bar-item w3-button">»</a>
</div>

Explanation

  • w3-disabled: Prevents interaction with the button, such as when a user is on the first or last page.

5. Dynamic Pagination with JavaScript

Add interactivity by dynamically managing pagination.

<div class="w3-bar w3-border" id="pagination">
  <!-- Pagination buttons will be dynamically generated here -->
</div>

<script>
function createPagination(totalPages, currentPage) {
  var pagination = document.getElementById("pagination");
  pagination.innerHTML = "";

  // Previous Button
  var prevButton = document.createElement("a");
  prevButton.className = "w3-bar-item w3-button" + (currentPage === 1 ? " w3-disabled" : "");
  prevButton.innerHTML = "«";
  pagination.appendChild(prevButton);

  // Page Numbers
  for (var i = 1; i <= totalPages; i++) {
    var pageButton = document.createElement("a");
    pageButton.className = "w3-bar-item w3-button" + (i === currentPage ? " w3-blue" : "");
    pageButton.innerHTML = i;
    pagination.appendChild(pageButton);
  }

  // Next Button
  var nextButton = document.createElement("a");
  nextButton.className = "w3-bar-item w3-button" + (currentPage === totalPages ? " w3-disabled" : "");
  nextButton.innerHTML = "»";
  pagination.appendChild(nextButton);
}

// Example: 5 total pages, starting on page 1
createPagination(5, 1);
</script>

Features

  • Dynamic Rendering: Automatically generates pagination based on the total number of pages.
  • Highlight Active Page: Adds a distinct class to the current page.

Best Practices

  1. Accessibility: Add ARIA roles to improve navigation for screen readers.
  2. Keep It Simple: Avoid overcrowding with too many page numbers.
  3. Responsive Design: Ensure pagination adapts to various screen sizes.
  4. User Feedback: Use hover effects or click animations for better interactivity.

Conclusion

Pagination is an essential component of web design for navigating large sets of data or pages. With W3.CSS Pagination, you can create responsive, user-friendly designs with minimal effort. Whether you need a simple navigation bar or a dynamic solution, W3.CSS provides the tools to get started.

Leave a Comment