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

Question

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

我已经将一个简单的jQuery分页放在一起，但是我遇到的问题是我无法为Next和Previous按钮以及创建分页(ie 1-2-3-4-5.. etc) dynamically based on the amount of content提出任何解决方案(ie 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，以便分页正常工作。

要制作“下一个”和“上一个”按钮，您可以使用在当前页面上添加的类。

Answer 2

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

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