如何使用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(); 
    } 
});