Question

我想使用我的分页，下一个，上一个，最后一个和开始按钮工作。我的jquery是：

$(document).ready(function(){
            $('#table').after('<div id="nav" style="width:800px; margin:0 auto;"></div>');
            var rowsShown = 2;
            var rowsTotal = $('#table tbody tr').length;
            var numPages = rowsTotal/rowsShown;
            for(var i = 0;i < numPages;i++) {
                var pageNum = i + 1;
                $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
            }
            $('#table tbody tr').hide();
            $('#table tbody tr').slice(0, rowsShown).show();
            $('#nav a:first').addClass('active').css("color", "blue");
            $('#nav a').bind('click', function(){

                $('#nav a').removeClass('active').css("color", "black");;
                $(this).addClass('active').css("color", "blue");;
                var currPage = $(this).attr('rel');
                var startItem = currPage * rowsShown;
                var endItem = startItem + rowsShown;
                $('#table tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
                        css('display','table-row').animate({opacity:1}, 300);
            });
        });

我的jsfiddle在这里jsfiddle。在分页中我想看到只剩下3个数字应该来点击下一个按钮。有人可以帮我解决这个问题。我努力解决，在网上搜索，但我无法解决。如果有人能解决这个问题，请帮助我。提前谢谢。

Answer 1

this

怎么样？

实施了三件事

下一步
上一页

仅显示三个数字

$(document).ready(function() {
    $("#table").after('<div id="nav" style="width:800px; margin:0 auto;"></div>');
    var e = 4;
    var t = $("#table tbody tr").length;
    var n = t / e;
    for (var r = 0; r < n; r++) {
        var i = r + 1;
        $("#nav").append('<a class="btn nums" href="#" rel="' + r + '">' + i + "</a> ")
    }
    $("#table tbody tr").hide();
    $("#table tbody tr").slice(0, e).show();
    $("#nav a:first").addClass("active").css("color", "blue");
    if (n > 3) {
        $("#nav").append('<a class="btn" href="#" rel="next">></a> ');
        $("#nav").prepend('<a class="btn" href="#" rel="prev" style="display:none"><</a> ')
    }
    $("#nav").on("click", "a", function() {
        var t = $(".nums");
        var n = $(this).attr("rel");
        if (n == "next") {
            n = $("#nav a.active").attr("rel");
            n++
        } else if (n == "prev") {
            n = $("#nav a.active").attr("rel");
            n--
        }
        var r = n * e;
        var i = r + e;
        $("#nav a").removeClass("active").css("color", "black");
        $('#nav a[rel="' + n + '"]').addClass("active").css("color", "blue");
        $("#table tbody tr").css("opacity", "0.0").hide().slice(r, i).css("display", "table-row").animate({
            opacity: 1
        }, 300);
        if ($("#nav a").last().prev().hasClass("active")) $("#nav a").last().hide();
        else $("#nav a").last().show();
        if (!$("#nav a").first().next().hasClass("active")) $("#nav a").first().show();
        else $("#nav a").first().hide();
        t.hide();
        if (t.filter(".active").is(t.first())) t.first().show().next().show().next().show();
        else if (t.filter(".active").is(t.last())) t.last().show().prev().show().prev().show();
        else {
            $('#nav a[rel="' + n + '"]').show().prev().show();
            $('#nav a[rel="' + n + '"]').next().show()
        }
    }).find("a.active").trigger("click")
})

<强>更新

FIDDLE

会有一个名为numLimit的变量。将其更改为您想要的数字，它将起作用

更新2

FIDDLE

已实施

第一
最后

我想在我的分页中使用下一个和上一个按钮

1 个答案: