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);
            }
        });
    });
});

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Card 4 Product Style01

Card 4 Product Style01

Cards box with title

Cards box with title

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Form login with background image changed style01

Form login with background image changed style01

Image hover Flip Flap Style

Image hover Flip Flap Style

Lightbox gallery style01

Lightbox gallery style01

Table responsive avec css native

Table responsive avec css native

Timeline style03

Timeline style03

Timeline style06

Timeline style06

up down tr in table with js

up down tr in table with js