Paginate Any Block Elements With jQuery smpPagination Plugin

Paginate Any Block Elements With jQuery smpPagination Plugin

smpPagination is a lightweight jQuery paginator plugin that provides an easy way to paginate any group of HTML elements on the client side.

1. To get started, add jQuery library together with the smpPagination plugin's JavaScript and CSS files to the html page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
</script>
<script src="smpPagination.js"></script>
<link rel="stylesheet" href="smpPagination.css">

2. Specify the number of entries to show per page (Default: 10).

let perPage = 5

3. Call the function on the block element (DIVs, UL lists, etc) to generate pagination controls on the page.

<ul id="pagination-block">
  <li>Bacon ipsum dolor</li>
  <li>amet ham deserunt</li>
  <li>spare ribs officia</li>
  <li>ut chuck pork meatloaf</li>
  <li>ea ball tip laborum</li>
  <li>Lorem sed pork belly</li>
  ...
</ul>
$(function(){
  $(".pagination-block").smpPagination(perPage);
});

4. Override the default styles of the pagination controls.

.smpPagination--pagination-nav {
  text-align:center;
}
.smpPagination--pagination {
  white-space: normal ;
  background-color: #0E9C57 ;
  border:1px solid #0E9C57 ;
  color: white ;
  font-weight: bold;
  padding: 5px 7px;
  margin-top:10px;
  cursor: pointer;
}
.smpPagination--pagination:hover {
  background-color: white ;
  color: #0E9C57 ;
}
.smpPagination--pagination.disable {
  background-color: lightgrey ;
  border-color: darkgray;
  color: darkgray ;
  cursor: not-allowed;
}
.smpPagination--pagination.next {
  float:right;
}
.smpPagination--pagination.prev {
  float:left;
}
.smpPagination--pagination-counter {
  padding: 5px 7px;
  margin-top:10px;
  display:inline-block;
  font-weight: bold;
}

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

  • Publication date: 02.10.2018
  • Source