Pagination with Jquery

<!DOCTYPE html>
<html>
<head>
    <title>A Simple Pagination jQuery | par MEZGANI SAID</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="A Simple Pagination jQuery">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <link href="animate.css" rel="stylesheet" type="text/css" />
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
    <div class="row mt-5">
        <div class="col-4 text-left mx-auto">
            <form>
                <select id="Itemsperpage" class="form-control">
                    <option value="4"  selected="selected">4</option>
                    <option value="8" >8</option>
                    <option value="12" >12</option>
                    <option value="16" >16</option>
                    <option value="20" >20</option>
                </select>
            </form>
        </div>
        <div class="col-12">
            <ul id="itemContainer" class="ulp row">
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
                <div class="col-3"><a href=""><img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" alt="" /></a></div>
            </ul>
        </div>
        <div class="col-4 text-left">
            <p id="legend1"></p>
        </div>
        <div class="col-4 text-center mx-auto">
            <div class="holderp"></div>
        </div>
        <div class="col-4 text-right">
            <form class="row">
            <input type="text" id="nbrpage" name="nbrpage" placeholder="tapez le numero de la page" class="form-control col-8" required/>
            <button class="btn btn-success btn-sm col-8">Allez</button>
            </form>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="jPages.min.js" type="text/javascript"></script>
	<script src="script.js" type="text/javascript"></script>
</body>
</html>

.ulp{
    width: 100%;
}
.ulp div{
    margin-top: 20px;
    margin-bottom: 20px;
}
.ulp img{
    width: 100%;
    height: auto;
}
.holderp{
    margin: 15px 0;
}
.holderp a{
    font-size: 15px;
    cursor: pointer;
    margin: 0 5px;
    color: #333;
}
.holderp a:hover{
    background-color: #222;
    color: #fff;}
.holderp a.jp-previous{
    margin-right: 15px;
}
.holderp a.jp-next{
    margin-left: 15px;
}
.holderp a.jp-current, 
a.jp-current:hover{
    color: #FF4242;
    font-weight: bold;}

.holderp a.jp-disabled, 
a.jp-disabled:hover{
    color: #bbb;
}
.holderp a.jp-current, 
a.jp-current:hover, 
.holder a.jp-disabled, 
a.jp-disabled:hover{
    cursor: default;
    background: none;
}
.holderp span{
    margin: 0 5px;
}


$(document).ready(function () {
    $("div.holderp").jPages({
        containerID: "itemContainer",
        perPage: 4,
        keyBrowse: true,
        scrollBrowse: true,
        animation: "bounceInUp",
        callback: function (pages,
        items) {
            $("#legend1").html("Page " + pages.current + " of " + pages.count);
            $("#legend2").html("Elements "+items.range.start + " - " + items.range.end + " of " + items.count);
        }
    });
    $("button").click(function () {
        /* get given page */
        var page = parseInt($("input").val());
        /* jump to that page */
        $("div.holderp").jPages(page);
    });
    $("select#Itemsperpage").change(function () {
        /* get new no of items per page */
        var newPerPage = parseInt($(this).val());
        /* destroy jPages and initiate plugin again */
        $("div.holderp").jPages("destroy").jPages({
            containerID: "itemContainer",
            perPage: newPerPage,
            keyBrowse: true,
            scrollBrowse: true,
            callback: function (pages,
            items) {
                $("#legend1").html("Page " + pages.current + " of " + pages.count);
                $("#legend2").html("Elements "+items.range.start + " - " + items.range.end + " of " + items.count);
            }
        });
    });
    $("select#Animation").change(function () {
        /* get new css animation */
        var newAnimation = $(this).val();
        /* destroy jPages and initiate plugin again */
        $("div.holderp").jPages("destroy").jPages({
            containerID: "itemContainer",
            animation: newAnimation,
            keyBrowse: true,
            scrollBrowse: true,
            callback: function (pages,
            items) {
                $("#legend1").html("Page " + pages.current + " of " + pages.count);
                $("#legend2").html("Elements "+items.range.start + " - " + items.range.end + " of " + items.count);
            }
        });
    });
});

Card Bootstrap4 01

Card Bootstrap4 01

Card Profile Style01

Card Profile Style01

Carousel Bootstrap4

Carousel Bootstrap4

Créer une input search animée

Créer une input search animée

Css Page grid layout

Css Page grid layout

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Form login b4 01

Form login b4 01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Scroll to div ID

Scroll to div ID

Simple Table With UIKIT

Simple Table With UIKIT

Social Media Icons

Social Media Icons

SwiperJS style01

SwiperJS style01