添加下一个/上一个按钮分页答案

【问题标题】：Add Next/previous buttons pagination添加下一个/上一个按钮分页
【发布时间】：2010-07-04 14:46:57
【问题描述】：

我如何向这个 sn-p 添加下一个/上一个按钮。我其实不想要这些数字。

var itemsPerPage = 4;


var $entries = $("#entries");
var $list = $entries.children("ul:first");
$list.children().eq(itemsPerPage).nextAll().andSelf().hide();

var $pagination = $("<ul class='pagination'></ul>").each(function () {
    var itemsTotal = $list.children().size();
    var pages = Math.ceil(itemsTotal / itemsPerPage);
    for (var i = 1; i <= pages; i += 1) {
        $(this).append("<li>" + i + "</li>");
    }
}).appendTo($entries);
$pagination.children("li:first").addClass("selected");
$pagination.children().click(function () {
    if ($(this).is(".selected")) {
        return;
    }
    var page = $(this).index() + 1;
    var firstToShow = (page - 1) * itemsPerPage;
    var lastToShow = page * itemsPerPage;
    $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow');
    $(this).addClass("selected").siblings(".selected").removeClass("selected");
});

【问题讨论】：

请清理您的格式。 4 个空格缩进代码。

标签： jquery pagination

【解决方案1】：

没有数字（page 变量需要变成全局变量才能管理您当前所在的页面）：

$(document).ready(function () {

    var page = 1;
    var itemsPerPage = 4;
    var prev = "<<";
    var next = ">>";

    var $entries = $("#entries");
    var $list = $entries.children("ul:first");
    $list.children().eq(itemsPerPage).nextAll().andSelf().hide();

    var $pagination = $("<ul class='pagination'></ul>").each(function () {
        var itemsTotal = $list.children().size();
        var pages = Math.ceil(itemsTotal / itemsPerPage);
        $(this).append("<li>" + prev + "</li>");
        $(this).append("<li>" + next + "</li>");
    }).appendTo($entries);
    $pagination.children("li:first").hide();
    $pagination.children().click(function () {

        if ($(this).text() == prev)
            page = page - 1;
        else if ($(this).text() == next)
            page = page + 1;

        var firstToShow = (page - 1) * itemsPerPage;
        var lastToShow = page * itemsPerPage;
        $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow');
        $($(this).parent().find("li")[page]).addClass("selected").siblings(".selected").removeClass("selected");

        if (page == 1)
            $(this).parent().find("li:first").hide();
        else
            $(this).parent().find("li:first").show();
        if (page == Math.ceil($list.children().size() / itemsPerPage))
            $(this).parent().find("li:last").hide();
        else
            $(this).parent().find("li:last").show();
    });
});

使用数字（您当前所在的页面可以继续通过 .selected 类进行管理）：

$(document).ready(function () {

    var itemsPerPage = 4;
    var prev = "<<";
    var next = ">>";

    var $entries = $("#entries");
    var $list = $entries.children("ul:first");
    $list.children().eq(itemsPerPage).nextAll().andSelf().hide();

    var $pagination = $("<ul class='pagination'></ul>").each(function () {
        var itemsTotal = $list.children().size();
        var pages = Math.ceil(itemsTotal / itemsPerPage);
        $(this).append("<li>" + prev + "</li>");
        for (var i = 1; i <= pages; i += 1) {
            $(this).append("<li>" + i + "</li>");
        }
        $(this).append("<li>" + next + "</li>");
    }).appendTo($entries);
    $pagination.children("li:first").hide();
    $pagination.children("li:eq(1)").addClass("selected");
    $pagination.children().click(function () {

        if ($(this).is(".selected")) { return; }

        var page;
        var selectedNode = $(this).parent().find(".selected");
        if ($(this).text() == prev)
            page = selectedNode.index() - 1;
        else if ($(this).text() == next)
            page = selectedNode.index() + 1;
        else
            page = $(this).index();

        var firstToShow = (page - 1) * itemsPerPage;
        var lastToShow = page * itemsPerPage;
        $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow');
        $($(this).parent().find("li")[page]).addClass("selected").siblings(".selected").removeClass("selected");

        if (page == 1)
            $(this).parent().find("li:first").hide();
        else
            $(this).parent().find("li:first").show();
        if (page == Math.ceil($list.children().size() / itemsPerPage))
            $(this).parent().find("li:last").hide();
        else
            $(this).parent().find("li:last").show();
    });
});

【讨论】：