Boostrap 4 Senzill Pagination Using Jquery Example

jquery , Bootstrap , Bootstrap 4 , Html , Css

Nicesnippets

537

29-08-2020


Boostrap 4 Senzill Pagination Using Jquery Example

Hi Guys,

In this blog,I will give you how to create senzill pagination using jquery boostrap 4 example. we will show example of boostrap 4 senzill pagination using jquery example.Senzill Pagination is a small jQuery plugin which utilizes Bootstrap 4 pagination component to paginate a large list of web contents for better readability.

Here, I will give you full example for simply display senzill pagination using jquery boostrap 4 example as bellow.

Example

<html lang="en">

<head>

<title>Senzill Pagination Using Jquery Boostrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

</head>

<style type="text/css">

img{

border:1px solid black;

margin:0.4rem;

}

.container{

border-radius:10px;

border:1px inset black;

padding:1rem;

padding-left:1.5rem;

background:#fff;

margin-top:80px;

}

body{

background-color:#000;

}

.current-settings p{

display: inline;

}

</style>

<body>

<div class="container">

<div class="row justify-content-center">

<div class="col-md-12 mx-auto text-center">

<h4 class="">Senzill Pagination Using Jquery Boostrap 4 Example</h4>

<h5>

</div>

</div>

<div class="row justify-content-center" id="wrapper" style="visibility:hidden;">

<img src="https://picsum.photos/200/300?image=0"/>

<img src="https://picsum.photos/200/300?image=1"/>

<img src="https://picsum.photos/200/300?image=239"/>

<img src="https://picsum.photos/200/300?image=341"/>

<img src="https://picsum.photos/200/300?image=301"/>

<img src="https://picsum.photos/200/300?image=521"/>

<img src="https://picsum.photos/200/300?image=600"/>

<img src="https://picsum.photos/200/300?image=67"/>

<img src="https://picsum.photos/200/300?image=88"/>

<img src="https://picsum.photos/200/300?image=96"/>

<img src="https://picsum.photos/200/300?image=510"/>

<img src="https://picsum.photos/200/300?image=110"/>

<img src="https://picsum.photos/200/300?image=12"/>

<img src="https://picsum.photos/200/300?image=321"/>

<img src="https://picsum.photos/200/300?image=104"/>

</div>

<div class="row">

<div class="col-md-4">

<div class="form container-fluid">

<div class="row">

<label for="elPerPage">Elements Per Page:</label>

</div>

<div class="row">

<div class="col-md-8">

<input class="form-control" type="number" style="width:100%;" id="elPerPage" value="5">

</div>

<div class="col-md-2">

<button class="btn btn-primary" style="" id="set_elems_per_page">Set</button>

</div>

</div>

</div>

</div>

<div class="col-md-4 current-settings">

<h5>Current Settings:</h5>

<p>Number of pages: <b><span id='number_of_pages'></span></b></p>

<p style="margin-top:0.2rem;">Elements per page: <b><span id='elements_per_page'></span></b></p>

</div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/gh/yak0d3/senzill-pagination@1.1.3-beta/senzill-pagination.js"></script>

</body>

<script type="text/javascript">

$(document).ready(function(){

var _elPerPage = 5;//We are going to use this later to set the number of elements to display per page

var number_of_pages = Math.ceil($('img').length / _elPerPage); //This is used just for this demo to calculate the number of pages

function stats(){//This is used just for this demo to display the current settings

if($('#elPerPage').val() > 0){

_elPerPage = $('#elPerPage').val();

}

number_of_pages = Math.ceil($('img').length / _elPerPage);

$('#number_of_pages').text(number_of_pages);

$('#elements_per_page').text(_elPerPage);

}

var senzill = $('#wrapper').senzill({

elPerPage: _elPerPage

}

);

stats();

$('#set_elems_per_page').on('click',function(){

if($('#elPerPage').val() > 0){//Check if the input is bigger than 0

_elPerPage = $('#elPerPage').val(); //Assign the new number of element per page to the _elPerPage variable

}

senzill.destroy();//Destroy the senzill-pagination instance

senzill = undefined;

senzill = $('#wrapper').senzill(//Start a new senzill-pagination instance with the new number of elements per page

{

elPerPage: _elPerPage

});

stats();

});

});

</script>

</html>

It will help you....