11-Apr-2023
.
Admin
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....
#Jquery
#Bootstrap
#Bootstrap 4
#Html
#Css
