Paginate HTML Block Container using jQuery Plugin – smpPagination

smpPagination is a simple jquery plugin which allow you to paginate multiple HTML block container into pagination. It help you to paginate group of DOM elements on client side so that you can display more information under single container.



Libraries

Include the jQuery core library after that load smpPagination.js

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
 <script type="text/javascript" src="smpPagination.js"></script>

HTML

Create multiple pagination-block and put your content.

<div class="pagination-block">
    Lorem ipsum ...
</div>
<div class="pagination-block">
    dolor sit amet ...
</div>
<div class="pagination-block">
    consectetur adipiscing elit ...
</div>



JS

Call smpPagination() on a jQuery selector to paginate all matched DOM elements. Pass the number of elements to display on page. This will default to 10 if not provided.

<script type="text/javascript">
    let perPage = 6 ; // Number of .pagination-block elements to show per page
 
    $(".pagination-block").smpPagination(perPage) ;
</script>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by SimonPao. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.