Client-side Pagination Plugin for Static Content - jQuery SimplePaginate.js

SimplePaginate.js is a lightweight and easy-to-use jQuery pagination plugin that enables client-side pagination for elements already present in the DOM.

It scans static items (like lists, cards, grids) you specify, calculates the pages needed based on your desired items-per-page count, and generates the necessary pagination controls – previous/next buttons, page numbers, and those little ellipses that indicate more pages where needed.

This can be useful when you load all the content upfront and just need a way to break it into digestible pages without server-side calls for each page view. 

How to use it:

1. Load both jQuery library and SimplePaginate.js in your document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/pagination.js"></script>

2. Create an empty container where the pagination controls will be injected:

<ul class="js-pagination"></ul>

3. Add a selector class to all the HTML elements you want to paginate:

<div class="js-pagination-item">
  Item 1
</div>
<div class="js-pagination-item">
  Item 2
</div>
<div class="js-pagination-item">
  Item 3
</div>
...

4. Call the generatePagination function and pass the required parameters.

• Selector for the pagination container ('.js-pagination')
• Selector for the items to be paginated ('.js-pagination-item')
• Number of items per page (10)
• Text for the previous button ('Prev')
• Text for the next button ('Next')

$(document).ready(function() {
  generatePagination('.js-pagination', '.js-pagination-item', 10, 'Prev', 'Next');
});

5. The plugin injects buttons and spans into your container (.js-pagination in this case). The structure looks something like this:

<ul class="js-pagination">
  <button class="prev" disabled="">Prev</button>
  <div class="numbers">
    <button class="number active" data-pagination="1">1</button>
    <span class="number-first" style="display: none;">...</span>
    <button class="number " data-pagination="2">2</button>
    <span class="number-last" style="">...</span>
    <button class="number " data-pagination="10">10</button>
  </div>
  <button class="next">Next</button>
</ul>

6. You can then customize the appearance of your pagination controls with CSS:

.number {
  padding: 5px 10px;
  margin: 0 2px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
}

.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.prev, .next {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
}

.prev:disabled, .next:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

...

FAQs

Q: Can I use this with data loaded via AJAX?

A: Not directly for paging the AJAX data itself. It only paginates existing DOM elements. If you load all data via AJAX into the DOM first, you could then call generatePagination on those new elements. But it won't handle fetching page 2, 3, etc., from a server.

Q: How do I style the 'active' page number differently?

A: Target the .number.active class in your CSS. The plugin adds/removes the active class automatically.

Q: What if I filter my items client-side after pagination is set up?

A: Pagination won't automatically update. The plugin checks for :not(.hidden) during initialization. If you hide items after it runs, the pagination count will be wrong. Best approach: filter your items first (e.g., add a .filtered-out class and hide them), then call generatePagination targeting only the visible items (e.g., .js-pagination-item:not(.filtered-out)). You'll need to potentially adjust the core plugin slightly or manage the selectors carefully.

Q: Is there a limit to the number of items?

A: The plugin itself doesn't impose a hard limit. Performance depends more on how many items your browser can handle efficiently in the DOM before pagination. If the page is slow to load initially with thousands of items, this plugin won't fix that underlying issue.

---

This awesome jQuery plugin is developed by renangf4. For more Advanced Usages, please check the demo page or visit the official website.