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

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Drag and drop or upload input file

Drag and drop or upload input file

Image hover 04

Image hover 04

Image hover Flip Flap Style

Image hover Flip Flap Style

Input file style01

Input file style01

Lightbox gallery style01

Lightbox gallery style01

Social Media Icons

Social Media Icons

Timeline style03

Timeline style03

Timeline style04

Timeline style04

Triangle Background css 01

Triangle Background css 01

up down tr in table with js

up down tr in table with js