Dynamically Generate Pagination Links With jQuery Pagination.js

A small (~1kb) and customizable jQuery plugin that allows developers to dynamically generate pagination links for long content & larger lists.

How to use it:

1. By default the plugin uses Bootstrap 4's stylesheet to style the pagination links. Without the need of Bootstrap JS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

2. Load the Pagination.js script after jQuery but before the closing body tag.

<script src="jquery.min.js"></script>
<script src="pagination.js"></script>

3. Create an empty unordered list in which the plugin will generate the pagination links.

<div id="page">
  <ul class="pagination"></ul>
</div>

4. Call the function on the top container and specify the number of items to paginate.

$(function() {
  $('#page').Pagination({
    size: 100
  });
});

5. Specify the number of pages to generate. Default: 5.

$(function() {
  $('#page').Pagination({
    size: 100,
    pageShow: 3
  });
});

6. Set the initial page. Default: page 1.

$(function() {
  $('#page').Pagination({
    size: 100,
    page: 2
  });
});

7. Limit the number of items to display per page. Default: 1.

$(function() {
  $('#page').Pagination({
    size: 100,
    limit: 10
  });
});

8. Return the current page using the callback function:

$(function() {
  $('#page').Pagination({
    size: 100,
    limit: 10
  },function(obj){
    alert(obj.page);
  });
});

9. Determine whether to display the first/last labels. Default: false.

$(function() {
  $('#page').Pagination({
    boundary: true
  });
});

10. You can also apply custom styles to the pagination links without Bootstrap 4.

.pagination {
  /* ... */
}

.page-item {
  /* ... */
}

Changelog:

2019-05-02

• Added update new Boundary option

---

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