Javascript Jquery中的动态分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31920360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 07:23:25 来源:igfitidea点击:
Dynamic pagination in Jquery
提问by Corentin Branquet
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.
我希望数字根据要显示的 div 数量自动生成，而不是在我的 HTML 文件中手动写入数字。
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
我的代码有效，但第 3 页和第 4 页中没有任何内容。我希望它们使用 Jquery 动态更改，而不是更新我的 HTML 文件中的数字
回答by semirturgay
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>回答by Ankit
You need to count the pages using Math.ceil($(".line-content").size() / pageSize), and then dynamically add <li>for each page.
您需要使用 统计页面Math.ceil($(".line-content").size() / pageSize)，然后<li>为每个页面动态添加。
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>回答by Anders
Place this somewhere it is executed when the DOM is ready, but before the click event handlers are added.
将它放在某个地方，它会在 DOM 准备好时执行，但在添加单击事件处理程序之前。
//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 #paginempty and the JavaScript will fill it for you:
然后你可以#pagin留空，JavaScript 会为你填充它：
<ul id="pagin">
</ul>
Disclaimar: I haven't tested this code.
免责声明：我还没有测试过这段代码。
回答by joyBlanks
//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.
这符合您的需要。
回答by Priya varshney
//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>回答by nazanin.h
you can use these code for pagination if you will have wanted appending to tag in html .
如果您希望在 html 中附加到标记，则可以使用这些代码进行分页。
var paginationfooter = {};
paginationfooter.Pager = function() {
this.currentPage = 1;
this.pagingnumber = "#pagingnum";
this.tagg = "#matn";
this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.limit != null) {
numPages = Math.ceil(this.paragraphs.length / this.limit);
}
return numPages;
};
this.showPage = function(page) {
this.currentPage = page;
var html = "";
for (var i = (page-1)*this.limit; i < ((page-1)*this.limit) + this.limit; i++) {
if (i < this.paragraphs.length) {
var disply = this.paragraphs.get(i);
html += "<" + disply.tagName + ">" + disply.innerHTML + "</" + disply.tagName + ">";
}
}
$(this.tagg).html(html);
pagenuming(this.pagingnumber, this.currentPage, this.numPages());
}
var pagenuming = function(container, currentPage, numPages) {
var paging = $("<div class='pagination'></div>");
var gridpaging = "<ul>";
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
gridpaging += "<li><a href='#' onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>";
} else {
gridpaging += "<li>" + i + "</li>";
}
}
gridpaging += "</ul>";
paging.append(gridpaging);
$(container).html(paging);
}
}
//---------------------------here input values
var pager = new paginationfooter.Pager();
$(document).ready(function() {
pager.limit = 5;
pager.pagingtag = $('#matn');
pager.paragraphs = $('p', pager.pagingtag);
pager.showPage(1);
});回答by Uddesh Keshri
pageSize = 5;
页面大小 = 5;
var pageCount = $(".setPagination").length / pageSize;
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
}
$("#pagin li").first().addClass("active")
showPage = function(page) {
$(".setPagination").hide();
$(".setPagination").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#pagin li").click(function() {
$("#pagin li").removeClass("active");
$(this).addClass("active");
showPage(parseInt($(this).text()))
});
}
}
