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.

="pagination-block">
    Lorem ipsum ...
>
="pagination-block">
    dolor sit amet ...
>
="pagination-block">
    consectetur adipiscing elit ...
>

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.

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

Related