帶頁碼的tablesorter pager（v 2.10）

Question

最新版本的tablesorter pager插件似乎缺少頁碼支持和每頁項數。使用舊版本（v2.0），可以這樣做。問這個問題的原因是因爲我們需要利用ajax獲取行（在新版本中引入）（因爲一次獲取​​所有數據會導致性能下降），同時保持表的外觀和感覺與之前。然而，很多已經從v2.0改變到v2.10。我也找不到任何修改updatePageDisplay函數的例子，這將有助於實現這一點。 下圖顯示的就是我要完成的：提前

感謝。

Answer 1

最新版本比原版靈活得多。因此，如果我們開始與這個尋呼機HTML（網頁大小數減少到匹配this demo;還注意到在頂部的第二呼叫塊只顯示可見光和總記錄數）

<div class="pager"> 
    <span class="left"> 
     # per page: 
     <a href="#" class="current">5</a> | 
     <a href="#">10</a> | 
     <a href="#">20</a> | 
     <a href="#">50</a> 
    </span> 
<span class="right"> 
     <span class="prev"> 
      <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" /> Prev&nbsp; 
     </span> 
<span class="pagecount"></span> 
&nbsp;<span class="next">Next 
      <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" /> 
     </span> 
</span> 

這個CSS

.left { float: left; } 
.right { 
    float: right; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -ms-user-select: none; 
} 
.pager .prev, .pager .next, .pagecount { cursor: pointer; } 
.pager a { 
    color: black; 
} 
.pager a.current { 
    text-decoration: none; 
    color: #0080ff; 
} 

這個腳本

var $table = $('table') 
    .on('pagerInitialized pagerComplete', function (e, c) { 
     var i, pages = '', t = [], 
      cur = c.page + 1, 
      start = cur > 1 ? (c.totalPages - cur < 3 ? -3 + (c.totalPages - cur) : -1) : 0, 
      end = cur < 3 ? 5 - cur : 2; 
     for (i = start; i < end; i++) { 
      if (cur + i >= 1 && cur + i < c.totalPages) { t.push(cur + i); } 
     } 
     // make sure first and last page are included in the pagination 
     if ($.inArray(1, t) === -1) { t.push(1); } 
     if ($.inArray(c.totalPages, t) === -1) { t.push(c.totalPages); } 
     // sort the list 
     t = t.sort(function(a, b){ return a - b; }); 
     // make links and spacers 
     $.each(t, function(j, v){ 
      pages += '<a href="#" class="' + (v === cur ? 'current' : '') + '">' + v + '</a>'; 
      pages += j < t.length - 1 && (t[j+1] - 1 !== v) ? ' ... ' : (j >= t.length - 1 ? '' : ' | '); 
     }); 
     $('.pagecount').html(pages); 
    }) 
    .tablesorter({ 
     theme: 'blackice', 
     widgets: ['zebra', 'columns'] 
    }) 
    .tablesorterPager({ 
     // target the pager markup - see the HTML block below 
     container: $(".pager"), 
     size: 5, 
     output: 'showing: {startRow} to {endRow} ({totalRows})' 
    }); 

// set up pager controls 
$('.pager .left a').on('click', function() { 
    $(this) 
     .addClass('current') 
     .siblings() 
     .removeClass('current'); 
    $table.trigger('pageSize', $(this).html()); 
    return false; 
}); 
$('.pager .right .pagecount').on('click', 'a', function(){ 
    $(this) 
     .addClass('current') 
     .siblings() 
     .removeClass('current'); 
    $table.trigger('pageSet', $(this).html()); 
    return false; 
}); 

Answer 2

請參閱現場演示並下載定製code.Using這個擴展版本，你可以在一個頁面中添加多個表。 http://www.pearlbells.co.uk/table-pagination/