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

时间:2010-07-04 14:46:58

标签: jquery pagination

如何将下一个/上一个按钮添加到此代码段。我实际上不想要数字。

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");
});

1 个答案:

答案 0 :(得分:2)

没有数字(变量需要变为全局变量才能管理您当前所在的页面):

$(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();
    });
});