→ Morgan
→ Pagination with Items Per Page Filter

Pagination with Items Per Page Filter

A responsive pagination component with an items per page dropdown filter, featuring previous and next navigation buttons optimized for mobile displays.

This Example is contributed by Morgan, on 26-Feb-2025. It is responsive.

Pagination Navigation Filter

Author Morgan

Fork Fullscreen

<div class="pagination-container">
  <div class="pagination-controls">
    <div class="items-per-page">
      <label for="itemsPerPage">Items per page:</label>
      <select id="itemsPerPage">
        <option value="5">5</option>
        <option value="10" selected>10</option>
        <option value="25">25</option>
        <option value="50">50</option>
      </select>
    </div>
    <div class="page-info">
      <span id="pageInfo">Showing 1-10 of 87 items</span>
    </div>
  </div>
  
  <div class="pagination-buttons">
    <button class="page-btn prev-btn" disabled>
      <span class="arrow">&laquo;</span>
      <span class="text">Previous</span>
    </button>
    
    <div class="page-numbers">
      <button class="page-btn number-btn active">1</button>
      <button class="page-btn number-btn">2</button>
      <button class="page-btn number-btn">3</button>
      <button class="page-btn number-btn">4</button>
      <button class="page-btn number-btn">5</button>
      <span class="ellipsis">...</span>
      <button class="page-btn number-btn">9</button>
    </div>
    
    <button class="page-btn next-btn">
      <span class="text">Next</span>
      <span class="arrow">&raquo;</span>
    </button>
  </div>
</div>

Related Examples

Responsive Pagination Component with Active State Indicator

Author:
Alex Morgan

5 months ago
Minimal Clean Pagination Component
A clean and minimal pagination component with smooth transitions, perfect for modern web applications and content-heavy websites.

Author:
Bishnu Thapa

5 months ago
Compact Pagination CSS component

Author:
Anonymous

5 months ago
Rounded Pagination Component with Previous and Next Navigation
A clean pagination component with rounded buttons for page navigation, featuring previous and next options along with numbered page indicators.

Author:
Marcus Hendricks

5 months ago
Pagination Component with Active Page Highlighting
A functional pagination component featuring numbered page buttons with clear active page highlighting. Includes previous/next navigation and responsive design for seamless page browsing.

Author:
Avdhut Surkute

1 month ago
Circular Navigation Pagination with Round Buttons
Stylish circular pagination buttons with hover effects and active state indicators. Improves user experience for paginated content.

Author:
Morgan

6 months ago
Pagination Component

Author:
Anonymous

6 months ago
Simple Pagination Component
A simple and accessible pagination component built with HTML, CSS, and JavaScript. Easily navigate through multiple pages of content.

Author:
Dino Smith

6 months ago
Responsive Pagination Navigation

Author:
Anonymous

6 months ago
Pagination Component

Author:
Anonymous

6 months ago
Simple Pagination Component
A clean and simple pagination component for navigating through pages of content. Easy to integrate and customize.

Author:
Janna Pineda

6 months ago
Button Group with Active Selection
A responsive button group with JavaScript functionality that adds an active class to the clicked button, providing visual feedback to users about their selection.

Author:
Anonymous

3 months ago

Didn't find component you were looking for?

Search from 500+ components