我想在我的分頁中使用下一個和上一個按鈕

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

UPDATE

FIDDLE

會有一個名爲numLimit變量。更改爲你想要的數字，它會工作

更新2

FIDDLE

實現

1. 首先
2. 最後