Blade-Pagination – Tiny Bootstrap Style Pagination Component

File Size:2.64 KB
Views Total:327
Last Update:December 31, 2017
Publish Date:December 31, 2017
Official Website:Go to website
License:MIT

Blade-pagination is a kind of small and cross-browser jQuery pagination plugin that is often used to create Bootstrap-style pagination links for your long web content. It is highly functional and used in well-effective manner for the productive functioning.

How to use:

1. Add you first have jQuery library installed :

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

2. Include blade-pagination.css inside your head tag and jquery.blade-pagination.jsjust 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 :

$('#demo').bladePagination({

  // max number of pages
  maxPageNum: 5,

  // label text
  firstLabel: '|<', // |<
  prevLabel: '<',   // <
  nextLabel: '>',   // >
  lastLabel: '>|',  // >|
  moreLabel: '...',

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

Done 🙂

Change Log

V1.0

2017-11-30