In this tutorial, We will learn how to create senzill pagination using jquery bootstrap 4 examples. we will show an example of bootstrap 4 senzill pagination using jquery example. 




Example:

<html lang="en">
    <head>
        <title>Senzill Pagination Using Jquery Boostrap 4 Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    </head>
    <style type="text/css">
        img{
            border:1px solid black; 
            margin:0.4rem;
        }
        .container{
            border-radius:10px;
            border:1px inset black; 
            padding:1rem;
            padding-left:1.5rem;
            background:#fff;
            margin-top:80px;
        }
        body{
            background-color:#000;
        }
        .current-settings p{
            display: inline;
        }
    </style>
    <body>
        <div class="container">
          
            <div class="row justify-content-center" id="wrapper" style="visibility:hidden;">
                <img src="https://picsum.photos/200/300?image=0"/>
                <img src="https://picsum.photos/200/300?image=1"/>
                <img src="https://picsum.photos/200/300?image=239"/>
                <img src="https://picsum.photos/200/300?image=341"/>
                <img src="https://picsum.photos/200/300?image=301"/>
                <img src="https://picsum.photos/200/300?image=521"/>
                <img src="https://picsum.photos/200/300?image=600"/>
                <img src="https://picsum.photos/200/300?image=67"/>
                <img src="https://picsum.photos/200/300?image=88"/>
                <img src="https://picsum.photos/200/300?image=96"/>
                <img src="https://picsum.photos/200/300?image=510"/>
                <img src="https://picsum.photos/200/300?image=110"/>
                <img src="https://picsum.photos/200/300?image=12"/>
                <img src="https://picsum.photos/200/300?image=321"/>
                <img src="https://picsum.photos/200/300?image=104"/>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form container-fluid">
                        <div class="row">
                            <label for="elPerPage">Elements Per Page:</label>
                        </div>
                        <div class="row">
                            <div class="col-md-8">
                                <input class="form-control" type="number" style="width:100%;" id="elPerPage" value="5">
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-primary"  style="" id="set_elems_per_page">Set</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 current-settings">
                    <h5>Current Settings:</h5>
                    <p>Number of pages: <b><span id='number_of_pages'></span></b></p>
                    <p style="margin-top:0.2rem;">Elements per page: <b><span id='elements_per_page'></span></b></p>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/gh/yak0d3/senzill-pagination@1.1.3-beta/senzill-pagination.js"></script>
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            var _elPerPage = 5;//We are going to use this later to set the number of elements to display per page
            var number_of_pages = Math.ceil($('img').length / _elPerPage); //This is used just for this demo to calculate the number of pages
            function stats() {//This is used just for this demo to display the current settings
                if ($('#elPerPage').val() > 0) {
                    _elPerPage = $('#elPerPage').val();
                }
                number_of_pages = Math.ceil($('img').length / _elPerPage);
                $('#number_of_pages').text(number_of_pages);
                $('#elements_per_page').text(_elPerPage);
            }
            var senzill = $('#wrapper').senzill({
                elPerPage: _elPerPage
            }
            );
            stats();
            $('#set_elems_per_page').on('click', function () {
                if ($('#elPerPage').val() > 0) {//Check if the input is bigger than 0
                    _elPerPage = $('#elPerPage').val(); //Assign the new number of element per page to the _elPerPage variable
                }
                senzill.destroy();//Destroy the senzill-pagination instance
                senzill = undefined;
                senzill = $('#wrapper').senzill(//Start a new senzill-pagination instance with the new number of elements per page
                        {
                            elPerPage: _elPerPage
                        });
                stats();
            });
        });
    </script>
</html>


Thanks, May this example will help you...