Boostrap 4 Senzill Pagination Using Jquery Example
When “Boostrap 4 Senzill Pagination Using Jquery Example” moves through design, development and browser testing, learn more here can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.
For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.
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/[email protected]/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....
- How to Show Loading Spinner in JQuery?
- How to Create Ajax Submit Form Using jQuery?
- How To Get Current Page URL, Path, Host and hash using jQuery?
- How To Get, Set and Delete Div Background Image jQuery?
- JQuery Remove All Unwanted Whitespace From String Example
- Body Background Video Using Vide Jquery Example
- JQuery UI Autocomplete Example
- JQuery Split String By Comma Into Array Example