Javascript 我想在分页中使用“下一步”和“上一步”按钮

我想使用我的分页与下一个，上一个，最后一个和开始按钮工作。 我的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);
            });
        });

$（文档）.ready（函数（）{
$（'#表'）。在（''）之后；
var rowsShown=2；
var rowsTotal=$（'#table tbody tr'）。长度；
var numPages=rowsTotal/rowsShown；
对于（变量i=0；i

我的朋友在这里。在分页中，我希望在单击“下一步”按钮时，只剩下3个数字。有人能帮我解决这个问题吗。我很努力地解决，在网上搜索，但我解决不了。如果有人能解决这个问题，请帮助我。提前谢谢。

怎么样

实施了三件事

下一个

上

只显示三个数字

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

$（文档）.ready（函数（）{
$（“#表”）。在（“”）之后；
变量e=4；
变量t=$（“#表体tr”）。长度；
var n=t/e；
对于（var r=0；r3）{
$（“#nav”）。附加（“”）；
$（“#nav”）。前置（'

将有一个名为
numLimit
的变量。将此变量更改为所需的数字，它就会工作

更新2


实施

首先
最后
怎么样

实施了三件事

下一个
上
只显示三个数字

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

$（文档）.ready（函数（）{
$（“#表”）。在（“”）之后；
变量e=4；
变量t=$（“#表体tr”）。长度；
var n=t/e；
对于（var r=0；r3）{
$（“#nav”）。附加（“”）；
$（“#nav”）。前置（'

将有一个名为
numLimit
的变量。将此变量更改为所需的数字，它就会工作

更新2


实施

首先
最后
您没有正确使用rel属性您没有正确使用rel属性非常感谢这对我很有用。但是我的桌子非常大，因此我需要第一个和最后一个按钮。如果可能的话，请帮助我。我感谢您在这方面所做的工作。再次感谢您。如果我想要的超过这个数字，那么我有什么要做什么？非常感谢。这对我来说很有用。但是我的桌子很大，所以我想要第一个和最后一个按钮。如果可能的话，请帮助我。我感谢你在这方面所做的工作。再次感谢你。如果我想要的不止这个数字，那么我该怎么办？