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

Background div gradient

Background div gradient

Calculatrice style01

Calculatrice style01

ChartJS style01

ChartJS style01

Convertir une div en image

Convertir une div en image

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Image hover 03

Image hover 03

Image hover 05

Image hover 05

Input range slider HTML style01

Input range slider HTML style01

Pie Charts

Pie Charts

Transitions Animations SVG Style01

Transitions Animations SVG Style01

texte animate css

texte animate css

toggle switch style01

toggle switch style01