分頁表tr添加上一個和下一個jquery

Question

我有一個分頁工作正常，但我想添加「上一個」和「下一個」按鈕到我的分頁代碼。

我想是這樣的：

這裏我的HTML標記：

<table class="paginated"> 
    <thead> 
     <tr> 
      <th scope="col">A</th> 
      <th scope="col">B</th> 
      <th scope="col">C</th> 
      <th scope="col">D</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
</tr> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
</tr> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
</tr> 
...... many many more rows in <tr>...</tr> ....... 
</tbody> 
</table> 

這裏我jQuery代碼：

$('td', 'table').each(function(i) { 
    $(this).text(i+1); 
}); 

$('table.paginated').each(function() { 
    var currentPage = 0; 
    var numPerPage = 5; 
    var $table = $(this); 
    $table.bind('repaginate', function() { 
     $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
    }); 
    $table.trigger('repaginate'); 
    var numRows = $table.find('tbody tr').length; 
    var numPages = Math.ceil(numRows/numPerPage); 
    var $pager = $('<div class="pager"></div>'); 
    var $previous = $('<span class="previous"><<</spnan>'); 
    var $next = $('<span class="next">>></spnan>'); 
    for (var page = 0; page < numPages; page++) { 
     $('<span class="page-number"></span>').text(page + 1).bind('click', { 
      newPage: page 
     }, function(event) { 
      currentPage = event.data['newPage']; 
      $table.trigger('repaginate'); 
      $(this).addClass('active').siblings().removeClass('active'); 
     }).appendTo($pager).addClass('clickable'); 
    } 
    $pager.insertBefore($table).find('span.page-number:first').addClass('active'); 
    $previous.insertBefore('span.page-number:first'); 
    $next.insertAfter('span.page-number:last'); 
}); 

這裏我的jsfiddle演示：http://jsfiddle.net/Xugej/1442/

希望有人能幫助我。

Answer 1

我能想到的最簡單的辦法是讓一個和下一個按鈕，觸發「點擊」適當的標籤按鈕事件：

$next.click(function (e) { 
    $previous.addClass('clickable'); 
    $pager.find('.active').next('.page-number.clickable').click(); 
}); 
$previous.click(function (e) { 
    $next.addClass('clickable'); 
    $pager.find('.active').prev('.page-number.clickable').click(); 
}); 

如果你想使他們有效/無效適當，我們需要一些更多的邏輯那裏。每當表repaginating，你需要檢查下一個和上一個按鈕是否應使點擊與否：

$table.on('repaginate', function() { 
    $next.addClass('clickable'); 
    $previous.addClass('clickable'); 

    setTimeout(function() { 
     var $active = $pager.find('.page-number.active'); 
     if ($active.next('.page-number.clickable').length === 0) { 
      $next.removeClass('clickable'); 
     } else if ($active.prev('.page-number.clickable').length === 0) { 
      $previous.removeClass('clickable'); 
     } 
    }); 
}); 
$table.trigger('repaginate'); 

小提琴：http://jsfiddle.net/Xugej/1445/