Dynamic pagination in Jquery
Solution 1
calculate page count than via a loop create links to pages.
//Pagination
pageSize = 8;
var pageCount = $(".line-content").length / pageSize;
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
}
$("#pagin li").first().find("a").addClass("current")
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
.current {
color: green;
}
#pagin li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>
<ul id="pagin">
</ul>
Solution 2
You need to count the pages using Math.ceil($(".line-content").size() / pageSize)
, and then dynamically add <li>
for each page.
I have moved the initialization code inside $() (i.e. the Ready Event).
//Pagination
pageSize = 8;
$(function() {
var pageCount = Math.ceil($(".line-content").size() / pageSize);
for (var i = 0; i < pageCount; i++) {
if (i == 0)
$("#pagin").append('<li><a class="current" href="#">' + (i + 1) + '</a></li>');
else
$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li>');
}
showPage(1);
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
})
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
.current {
color: green;
}
#pagin li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>
<ul id="pagin">
</ul>
Solution 3
Place this somewhere it is executed when the DOM is ready, but before the click event handlers are added.
//How many pages do we want?
elementCount = $('.line-content').size();
pageCount = Math.ceil(elementCount / pageSize);
//Add the buttons.
buttons = '';
for(i=1; i<=pageCount; i++) {
buttons += '<li><a href="#">' + i + '</a></li>');
}
$('#pagin').html(buttons);
Then you can just leave #pagin
empty and the JavaScript will fill it for you:
<ul id="pagin">
</ul>
Disclaimar: I haven't tested this code.
Solution 4
//Pagination
pageSize = 8;
var pageCount = $(".line-content").length / pageSize;
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
}
$("#pagin li").first().find("a").addClass("current")
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
.current {
color: green;
}
#pagin li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>
<ul id="pagin">
</ul>
Solution 5
//Pagination
pageSize = 8;
showPage = function(page) {
$('.line-content').hide();
$('.line-content:gt('+((page-1)*pageSize)+'):lt('+(page)*(pageSize-1)+')').show();
$('.line-content:eq('+((page-1)*pageSize)+')').show();
}
var pgs = Math.ceil($('.line-content').length/pageSize);
var pgnt = '';
for(var i=1;i<=pgs;i++){
pgnt += '<li><a href="#">'+i+'</a></li>';
}
$('#pagin').html(pgnt);
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
showPage(1);
.current {
color: green;
}
#pagin li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>
<ul id="pagin">
</ul>
This is inline to what you needed.
Corentin Branquet
Updated on July 11, 2022Comments
-
Corentin Branquet almost 2 years
I have this code :
//Pagination pageSize = 8; showPage = function(page) { $(".line-content").hide(); $(".line-content").each(function(n) { if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show(); }); } showPage(1); $("#pagin li a").click(function() { $("#pagin li a").removeClass("current"); $(this).addClass("current"); showPage(parseInt($(this).text())) });
.current { color: green; } #pagin li { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="line-content">1 I have some content</div> <div class="line-content">2 I have some content</div> <div class="line-content">3 I have some content</div> <div class="line-content">4 I have some content</div> <div class="line-content">5 I have some content</div> <div class="line-content">6 I have some content</div> <div class="line-content">7 I have some content</div> <div class="line-content">8 I have some content</div> <div class="line-content">9 I have some content</div> <div class="line-content">10 I have some content</div> <div class="line-content">11 I have some content</div> <div class="line-content">12 I have some content</div> <ul id="pagin"> <li><a class="current" href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul>
Instead of writing numbers manually in my HTML file, I want the numbers generate automatically according to the number of divs to display.
The code I have works but there is nothing in page 3 and 4. Instead of update the numbers in my HTML file, I want them to change dynamically with Jquery
-
coderwill almost 7 yearsyour solution it's very easy to understand and i am also try with your solution and generate pagination. but can you please help me in my db above 4000 data is store or also more than up to so that time i want pagination like this First and in the last pagination something last so any idea how can do that
-
alistaircol over 6 yearsYou should include some comment on what you have added to your solution.
-
executable over 5 yearsCan you give some explanation please.