如何使用tablesorter設置要顯示在一個表中的行數jquery

Question

我正在使用tablesorter jquery插件（v2.20.1）。我試圖在表渲染中設置每頁的行數。 JS：

var $table = $("#table").tablesorter({ 
    widgets: ['zebra', 'columns', 'filter'], 
    widthFixed : true, 
    ignoreCase: true, 
    widgetOptions : { 
     filter_columnFilters: false 
    } 
}).tablesorterPager({    
    size: 2 
}); 

但即使當我設置的大小：2，但它仍然顯示所有頁面上可用的行。我只是想看每頁顯示2行，並使用simplePagination插件，我分頁以獲得下一組行。目前我的表格有3行，所以最好在渲染時顯示2行，當我點擊下一個按鈕應該帶我到下一頁的下一行。 這裏是的tablesorter尋呼機JS：

items = $("table tbody tr"); 
perPage = 2; 
numItems = items.length; 
items.slice(perPage).hide(); 
$("#pagination").pagination({ 
    items: numItems, 
    itemsOnPage: perPage, 
    labelText: 'Showing', 
    cssStyle: 'light-theme', 
    onInit: function(){ 
     startItem = ((this.currentPage*this.itemsOnPage)+1); 
     endItem = ((startItem-1)+this.itemsOnPage); 
     if(endItem > this.items){ 
      endItem = this.items; 
     } 
     $('#pagination').prepend(
     '<div class="pagination-addon">'+ 
     '<label class="pagination-label">'+this.labelText+'</label> '+ 
     '<label class="pagination-start-item">'+startItem+'</label> - '+ 
     '<label class="pagination-end-item">'+endItem+'</label> of '+ 
     '<label class="pagination-total-items">'+this.items+'</label>'+ 
     '</div>' 
     ); 
    }, 

    onPageClick: function(pageNumber) { 
     this.onInit(); 
     items.hide().slice(startItem-1, endItem).show(); 
    } 
}); 

HTML：

<table id="table"> 
    <tr> 
    <td> items1</td> 
    <td>items2</td> 
    <td>items3</td></tr> 
</table> 
<div id="pagination"></div> 

http://jsfiddle.net/anLa1how/

林不知道是否有任何其他方式來設置的tablesorter頁面大小，如果沒有任何想法這裏有什麼可能是錯誤的，因爲我沒有看到預期的頁面大小顯示。 謝謝！

Answer 1

我設法使用simplePagination.js而不是jquery.tablesorter.pager.js。但是...你是否意識到你只定義了1行，所以沒有什麼可以分頁？

這是代碼和工作Fiddle。

HTML

<table id="table"> 
    <tr> 
     <td>items1</td> 
     <td>items2</td> 
     <td>items3</td> 
    </tr> 
    <tr> 
     <td>items4</td> 
     <td>items5</td> 
     <td>items6</td> 
    </tr> 
    <tr> 
     <td>items7</td> 
     <td>items8</td> 
     <td>items9</td> 
    </tr> 
</table> 
<br> 
<div id="pagination"></div> 

JS

var $table = $("#table").tablesorter({ 
    widgets: ['zebra', 'columns', 'filter'], 
    widthFixed : true, 
    ignoreCase: true, 
    widgetOptions : { 
     filter_columnFilters: false 
    } 
}); 

var items = $("table tbody tr"); 
var perPage = 2; 
var numItems = items.length; 
items.slice(perPage).hide(); 

$("#pagination").pagination({ 
    items: numItems, 
    itemsOnPage: perPage, 
    labelText: 'Showing', 
    cssStyle: 'light-theme', 
    onInit: function(){ 
     startItem = ((this.currentPage*this.itemsOnPage)+1); 
     endItem = ((startItem-1)+this.itemsOnPage); 
     if(endItem > this.items){ 
      endItem = this.items; 
     } 
     $('#pagination').prepend(
      '<div class="pagination-addon">'+ 
      '<label class="pagination-label">'+this.labelText+'</label> '+ 
      '<label class="pagination-start-item">'+startItem+'</label> - '+ 
      '<label class="pagination-end-item">'+endItem+'</label> of '+ 
      '<label class="pagination-total-items">'+this.items+'</label>'+ 
      '</div>' 
     ); 
    }, 

    onPageClick: function(pageNumber) { 
     this.onInit(); 
     items.hide().slice(startItem-1, endItem).show(); 
    } 
});