Paginate Any Content With Bootstrap 4 Pagination Component

luckmoshypagnation.js is a small and customizable jQuery pagination plugin to dynamically generate pagination links as well as next/prev/first/last page links for large sets of data.

Based on the Bootstrap 4's pagination component. Supports both static and ajax content.

Key Features:

• Carousel style pagination. 
• Allows you to determine the total/start/visible pages.
• Custom text labels.
• Auto hides if there is only one page.
• Custom pagination classes to create your own styles.

How to use it:

1. Create an empty HTML unordered list for the pagination.

<ul id="luckmoshy" class="pagination">
  
</ul>

2. Create block elements to be paginated.

<div class="jumbotron demo" id="container-pagnation1">
  Content Block 1
</div>
<div class="jumbotron demo" id="container-pagnation2">
  Content Block 2
</div>
<div class="jumbotron demo" id="container-pagnation3">
  Content Block 3
</div>
...

3. Load the luckmoshyJqueryPagnation.js script after jQuery & Bootstrap's JavaScript.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/popper.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<script src="/path/to/js/luckmoshyJqueryPagnation.js"></script>

4. Initialize the pagination and handle the pagination events using the onPageClick callback.

$('#luckmoshy').luckmoshyPagination({

  // the total number of pages
  totalPages: 5,

  // the current page to show on start
  startPage: 1,

  // maximum visible pages
  visiblePages: 3,

  // callback function
  onPageClick: function (event, page) {
    $('.page-active').removeClass('page-active');
    $('#container-pagnation'+page).addClass('page-active');
  }

});

5. Hide unwanted pages and display only the current page.

.demo {
  display:none;
}

.page-active {
  display: block;
}

6. Full plugin options with default values.

$('#luckmoshy').luckmoshyPagination({

  totalPages: 1,
  startPage: 1,
  visiblePages: 5,
  initiateStartPageClick: true,
  hideOnlyOnePage: false,
  href: false,
  pageVariable: '{{page}}',
  totalPagesVariable: '{{total_pages}}',
  page: null,
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',
  loop: false,
  onPageClick: null,
  paginationClass: 'pagination',
  nextClass: 'page-item next',
  prevClass: 'page-item prev',
  lastClass: 'page-item last',
  firstClass: 'page-item first',
  pageClass: 'page-item',
  activeClass: 'active',
  disabledClass: 'disabled',
  anchorClass: 'page-link'

});

Changelog:

2020-09-06

• JS updated

---

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