Javascript 简单的 jQuery 分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10034724/
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
Simple jQuery Pagination
提问by Hymantheripper
I have a page with about 50 divs on it. I would like to organise these divs into groups of six, so that the client doesn't get 'information overload'. I have created a simple example/reduced test caseof my problem. As you can see, there a lots of divs, and I want it so that when the page loads, only the first six are visible, but when you click on page 2 or next, the next six are revealed et cetera. The class of the page number you are on should also be set to have class="current".
我有一个页面，上面有大约 50 个 div。我想将这些 div 组织成六个一组，这样客户就不会得到“信息过载”。我为我的问题创建了一个简单的示例/简化的测试用例。正如你所看到的，有很多 div，我希望它在页面加载时，只有前六个可见，但是当你点击第 2 页或下一页时，接下来的六个显示等等。您所在页码的类别也应设置为具有class="current".
So far I have tried using jQuery, but I have been getting quite stuck! Any help would be much appreciated!
到目前为止，我已经尝试过使用 jQuery，但我一直被卡住了！任何帮助将非常感激！
回答by georg
When a page is requested, hide all content divs, then iterate through them and show those that should appear on the "page":
当页面被请求时，隐藏所有内容 div，然后遍历它们并显示那些应该出现在“页面”上的：
showPage = function(page) {
$(".content").hide();
$(".content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
回答by offroff
Parts of this code is not pretty but I think it does the job
这段代码的一部分并不漂亮，但我认为它可以胜任
var currentpage = 1;
var pagecount = 0;
function showpage(page) {
$('.content').hide();
$('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show();
$('#pagin').find('a').removeClass('current').eq(page).addClass('current');
}
$("#pagin").on("click", "a", function(event){
event.preventDefault();
if($(this).html() == "next") {
currentpage++;
}
else if($(this).html() == "prev") {
currentpage--;
} else {
currentpage = $(this).html();
}
if(currentpage < 1) {currentpage = 1;}
if(currentpage > pagecount) {currentpage = pagecount;}
showpage(currentpage);
});
$(document).ready(function() {
pagecount = Math.floor(($('.content').size()) / 6);
if (($('.content').size()) % 6 > 0) {
pagecount++;
}
$('#pagin').html('<li><a>prev</a></li>');
for (var i = 1; i <= pagecount; i++) {
$('#pagin').append('<li><a class="current">' + i + '</a></li>');
}
$('#pagin').append('<li><a>next</a></li>');
showpage(1);
});?
回答by Chandan Kumar Thakur
The following code is taken from https://deltafrog.com/pagination-jquery-without-plugin/
以下代码摘自https://deltafrog.com/pagination-jquery-without-plugin/
jQuery('document').ready(function(){
var item_per_page=5;
var $block=jQuery('.block');
var block_count=$block.length;
var number_of_pages=Math.ceil(block_count/item_per_page);
//append pagination in body
jQuery('body').append("<div class='pagination'></div>");
for(var i=1; i<=number_of_pages; i++){
jQuery('.pagination').append("<div class='page'>"+i+"</div>");
}
//activate first page
jQuery(".page:first-child").addClass('active');
jQuery('.block').filter(function( index ) { return index < item_per_page;}).addClass('active');
//activate pagination on click
jQuery('body').delegate('.page','click',function(){
var page_index=jQuery(this).index();
var start=page_index*item_per_page;
$block.removeClass('active');
jQuery(".page").removeClass('active');
jQuery(".page").eq(page_index).addClass('active');
for(var j=0;j<item_per_page;j++){
$block.eq(start+j).addClass('active');
}
});
});
