jQuery Plugin To Paginate Any Long Text Content - jPaginate

File Size: 7.33 KB
Views Total: 8001
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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: '&laquo;',
next_text: '&raquo;'

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.