带有动态分页和下一个和上一个按钮的jQuery分页？答案

【问题标题】：jQuery pagination with dynamic pagination and next and previous buttons?带有动态分页和下一个和上一个按钮的jQuery分页？
【发布时间】：2015-04-02 15:07:36
【问题描述】：

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

我已经建立了一个简单的 jQuery 分页，但我遇到的问题是我无法为 Next 和 Previous 按钮提供任何解决方案，而且, 创建分页(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())) 
});

任何帮助将不胜感激。

【问题讨论】：

我创建了一个运行良好的 jquery 分页，但是当我发现其他页面没有被搜索引擎索引时我停止使用它，因为它们在源代码中不存在并且在页面之后创建已加载
@AshkanMobayenKhiabani，我有一个叫 Ashkan 的伙伴。 :)

标签： javascript jquery pagination

【解决方案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 以使分页正常工作。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：