Dynamically Create Pagination Links Using jQuery - pagination-lgh.js

pagination-lgh.js is a tiny and easy jQuery plugin that lets you dynamically generate creative, customizable pagination links for long web content like lists, tables, cards, etc.

How to use it:

1. Load the stylesheet jquery-pagination-lgh.css for the default styling of the pagination plugin.

<link rel="stylesheet" href="css/jquery-pagination-lgh.css" />

2. Create a placeholder element in which the plugin generates pagination links.

<div class="pagination-box"></div>

3. Load jQuery library and the pagination-lgh.js script right before the closing body tag.

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

4. Initialize the plugin to generate a default pagination component.

$('.pagination-box').pagination({

  // options here

});

5. Customize the pagination component with the following parameters:

• page: Current page index on page load
• limit: Max number of records per page
• total: Total number of records
• pageTotal: Total number of pages
• pageShow: The number of pages to show
• min: Minimum number of pages
• max: Maximum number of pages

$('.pagination-box').pagination({

  page: 1,
  limit: 10,
  total: 0,
  pageTotal: 1,
  pageShow: 3, 
  min: 1,
  max: 3

});

6. Update the pagination component.

$('.pagination-box').pagination('update', {
  // options here
});

7. Refresh the pagination component when needed.

$('.pagination-box').pagination('refresh');

8. Handle the pagination event using the clickFun callback.

$('.pagination-box').pagination({

  clickFun: function (page, limit, total, pageTotal, pageShow) {
    // do something
  }

});

9. Enable/disable controls using the visible parameter:

$('.pagination-box').pagination({

  visible: ['start', 'end', 'last', 'next', 'number', 'left', 'right']

});

Changelog:

2020-08-24

• Added First/Last controls

---

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