Question

我正在尝试使用jQuery创建分页。分页的内容是通过PHP生成的，因此它们是动态的。

我已经提出了一个简单的jQuery分页，但我遇到的问题是我无法为下一步和上一页按钮提供任何解决方案，创建分页(i.e. 1-2-3-4-5.. etc) dynamically based on the amount of content。

目前，我正在使用<li></li>

手动将1-2-3等手动放入我的代码中

这是我的jsfiddle代码：

https://jsfiddle.net/q5rgLwb8/1/

这是我的全部代码：

itemperPage = 2;

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

showPage(1);

$("#pagin li a").click(function() {
    $("#pagin li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text())) 
});

任何帮助将不胜感激。

Answer 1

这是你的小提琴编辑：

initPagination = function(itemPerPage) {
    console.log(itemPerPage);
    var nbContent = $(".mypro").length;
    var nbPage = Math.ceil(nbContent/itemPerPage);
    var contentPagination = $('#pagin');
    var classLi = '';
    for(var i = 1; i <= nbPage; i++) {
        classLi = i == 1 ? 'current' : '';
        contentPagination.append('<li class="'+classLi+'"><a href="#">'+i+'</a></li>');
    }
    $("#pagin li a").click(function() {
        $("#pagin li a").removeClass("current");
        $(this).addClass("current");
        showPage(parseInt($(this).text())) 
    });
}

https://jsfiddle.net/q5rgLwb8/2/

原则是根据您拥有的div数和您希望按页显示的内容数创建LI。然后绑定你的LI以使分页工作。

制作＆＃34; next＆＃34;和＆＃34; prev＆＃34;按钮，您可以使用您在当前页面上添加的类。

Answer 2

您可以使用此代码替换您的项目（将其放在showPage（1）;）之后：

$('.mypro').each(function (index, value) {
    $('#pagin').append(
            "<li value=" 
                   + (index + 1) 
                   + "><a href='#'>" 
                   + $(this).text() 
                   + "</a></li>");
});

jQuery与动态分页以及下一个和上一个按钮的分页？

2 个答案: