简单的 jQuery 分页答案

【问题标题】：Simple jQuery Pagination简单的 jQuery 分页
【发布时间】：2012-04-19 13:18:20
【问题描述】：

我有一个包含大约 50 个 div 的页面。我想将这些 div 分成六个一组，这样客户就不会得到“信息过载”。我为我的问题创建了一个简单的example/reduced test case。如您所见，有很多 div，我希望它在页面加载时仅显示前六个，但是当您单击第 2 页或下一个时，会显示下六个等等。您所在页码的类别也应设置为class="current"。

到目前为止，我已经尝试过使用 jQuery，但我一直卡住了！任何帮助将不胜感激！

【问题讨论】：

您是否考虑过选项卡式视图而不是分页。我只是认为分页在像网格这样的情况下更有意义，但是对于划分完整的内容，我想 tabview 更好
是的，你是对的，在你的情况下，分页更有意义。
有大量的 jQuery 插件。例如：jquery4u.com/plugins/10-jquery-pagination-plugins

标签： javascript jquery html css pagination

【解决方案1】：

以下代码取自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');
    }

});

});

【讨论】：

【解决方案2】：

当请求页面时，隐藏所有内容 div，然后遍历它们并显示那些应该出现在“页面”上的内容：

showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}

http://jsfiddle.net/jfm9y/184/

【讨论】：

有疑问为什么你要使用 parseInt 虽然你可以使用 this.text() 来显示文本

【解决方案3】：

这段代码的某些部分并不漂亮，但我认为它可以完成工作

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);

});

【讨论】：

任何时候你看到像$('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show();这样的代码，它都是使用循环的候选者。只是说'