Tiny Bootstrap-style Pagination Component With jQuery - blade-pagination

blade-pagination is a small and cross-browser jQuery pagination plugin used to create Bootstrap-style pagination links for your long web content.

How to use it:

1. Make sure you first have jQuery library installed properly in your webpage.

<script src="//code.jquery.com/jquery.min.js"></script>

2. Include blade-pagination.css inside your head tag and jquery.blade-pagination.js just before the closing body tag.

<link rel="stylesheet" href="blade-pagination.css">
<script src="jquery.blade-pagination.js"></script>

3. Create an html list for the pagination component and specify the current page and total pages using data attributes as follows:

<ul id="demo" class="blade-pagination" data-current="4" data-total="8">
</ul>

4. Initialize the plugin and done.

$('#demo').bladePagination();

5. Config the plugin by passing the following options to the bladePagination() object.

$('#demo').bladePagination({

  // max number of pages
  maxPageNum: 5,

  // label text
  firstLabel: '|&lt;', // |<
  prevLabel: '&lt;',   // <
  nextLabel: '&gt;',   // >
  lastLabel: '&gt;|',  // >|
  moreLabel: '...',

  // callback
  clickPage: function(page) {}
  
});

Change log:

2017-11-30

• CSS update

---

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