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

bootstrap4 tabs

bootstrap4 tabs

SwiperJS style01

SwiperJS style01

Scroll to div ID

Scroll to div ID

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Input range slider HTML style04

Input range slider HTML style04

Image hover 02

Image hover 02

Header Aside Footer Admin

Header Aside Footer Admin

Form Création de compte

Form Création de compte

Compteur avec b4

Compteur avec b4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Card Profile Style01

Card Profile Style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire