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

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

已经实现了三件事

1. 下一步
2. 上一页

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

更新

FIDDLE

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

更新 2

FIDDLE

已实现

1. 首先
2. 最后