Question

在附加的jsfiddle中你可以找到一个分页。

[jsfiddle.net/3u64cx2s/4/][1]

分页本身（1,2,3）完美无缺。但是，上一个和下一个按钮不能按预期方式工作。

例如，如果我在第1页并单击上一个按钮，则会转到“空”表。当我在第3页并单击下一个按钮时，会发生同样的情况。此外，如果我在上一个或下一个按钮上单击几次，它会将我带回到一个页面，其中显示“head7”到“head9”，它根本不应出现。

我希望你们可以帮我解决这些问题。

非常感谢你： - ）

Answer 1

你的jquery代码中有一个错误：

   /* Pagination: Without Buttons */

$(document).ready(function(){    

pageSize = 2;

showPage = function(page) {
    $(".post").hide();

    $(".post").each(function(n) {



            if (n >= pageSize * (page - 1) && n < pageSize * page)
                $(this).show();
        });        
    }

    showPage(1);

    $("#pages .pages_1").click(function() {
        $("#pages .pages_1").removeClass("current");
        $(this).addClass("current");
        showPage(parseInt($(this).text())); 
    });

        $('#prev').click(prevPage);
        $('#next').click(nextPage);

    });


    /* Pagination: Inlcuding Buttons */


    var page = 1;

    function prevPage() {
        debugger;
        if (page === 1) {
            page = Math.floor($('.pagination .post').length/pageSize);
        } else {
            page--;
        }
        console.log(page);
        showPage(page);
    }

    function nextPage() {
        if (page == Math.floor($('.pagination .post').length/pageSize)) {
            page = 1;
        } else {
            page++;
        }
        showPage(page);
    }

小提琴支持：http://jsfiddle.net/3u64cx2s/9/
（更新小提琴）

Answer 2

来自 Shubham Nigam 的精彩代码，但是next和prev函数存在问题。您使用Math.floor（）来获取总页面的最大整数。如果每页有4个结果，总计8个结果，则可以。但总共6个结果并不是因为6/4 = 1,5而且Math.floor（）使其成为1页。

您必须在代码中使用 Math.ceil（）才能使其正常工作：）

function prevPage() {
    debugger;
    if (page === 1) {
        page = Math.ceil($('.pagination .post').length/pageSize);
    } else {
        page--;
    }
    console.log(page);
    showPage(page);
}

function nextPage() {
    if (page == Math.ceil($('.pagination .post').length/pageSize)) {
        page = 1;
    } else {
        page++;
    }
    showPage(page);
}

上一页。和下一个按钮分页

2 个答案: