jQuery pagination plugin for easy and quick pagination

Are you looking for jQuery pagination plugin for easy and quick pagination If Yes then here I am going to share awesome plugin called JOLD Paginator. It is a lightweight, blazing-fast, easy-to-style, client-side pagination plugin that dynamically renders pagination links for the long content list.

Libraries

Include jquery.joldPaginator.min.js after calling jQuery in the footer. Alternatively.

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

HTML

Create a list with items to paginate:

="items-container">
        
>Paginated items:
>
        
="item item-visible">item 1
>
        
="item item-visible">item 2
>
        
="item item-visible">item 3
>
        
="item item-visible">item 3
>
        
="item item-visible">item 4
>
        
="item item-visible">item 5
>
        
="item item-visible">item 6
>
        
="item item-visible">item 7
>
        
="item item-visible">item 8
>
        
="item item-visible">item 9
>
        
="item item-visible">item 10
>
    
>
="pagination-indicator">
>

The item-visible class is necessary to tell the paginator these are active items to search for. All items that do not have this class will not be picked up by the paginator, and should be hidden.

JS

Initiate the paginator on the .items-container element.

var paginator = new $('.items-container').joldPaginator({
        'perPage': 10,
        'items': '.item',
        'paginator': '.pagination-container',
        'indicator': {
            'selector': '.paginationindicator',
            'text': 'Showing item {start}-{end} of {total}',
        }
    });

This example initiates the paginator on the .items-container element and searches for all elements with the class .item within that container. It pages on 10 items, and displays the pagination in the .pagination-container element in your html.
All of these elements need to be present on the page you’re initiating the paginator.

See live demo and download source code.

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

Related