jQuery Plugin To Paginate Any Long Text Content - jPaginate

jPaginate is a lightweight and easy-to-style jQuery pagination plugin which enables you to paginate any long text content (lists, paragraphs, etc) on the webpage.

How to use it:

1. In this case, we're going to use Bootstrap's styles to style the pagination controls.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">

2. Add the CSS class 'pagination__item' to your text wrappers as follows:

<div class="pagination__list">
  <div class="pagination__item">
      <p>
          Content 1
      </p>
  </div>
  <div class="pagination__item">
      <p>
          Content 2
      </p>
  </div>
  <div class="pagination__item">
      <p>
          Content 3
      </p>
  </div>
  ...
</div>

3. Place jQuery library and the jQuery jPaginate.js plugin at the bottom of the webpage.

<script src="/path/to/query.min.js"></script>
<script src="jQuery.paginate.js"></script>

4. Just call the plugin on the top element and we're done.

$('.pagination__list').paginate();

5. Limit the maximum number of item to display per page.

$('.pagination__list').paginate({
  items_per_page: 3
});

6. Apply your custom CSS styles to the pagination.

.pagination { ... }

7. Available options.

pagination_class: "pagination",
items_per_page: 5,
prev_next: true,
prev_text: '«',
next_text: '»'

Change log:

2017-03-09

• Fix multiple instances handling

2016-11-05

• Add option for customizing the text for the previous and next controls

---

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