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使其有效。但是......你是否意识到你只定义了一行所以没有什么可以分页？

以下是代码和工作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();
    }   
});

如何使用tablesorter-Jquery设置要在表中显示的行数

1 个答案: