Question

最新版本的tablesorter pager插件似乎缺少页码支持和每页的项目数。使用旧版本（v2.0），可以这样做。问这个的原因是因为我们需要利用新版本中引入的行的ajax获取（因为同时获取所有数据会导致性能损失），同时保持表的外观和感觉相同之前。但是，很多东西已经从v2.0变为v2.10。我也找不到任何修改updatePageDisplay函数的例子，这有助于实现这一点。下图显示了我要完成的任务：

enter image description here

提前致谢。

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

请参阅现场演示并下载自定义代码。使用此扩展版本，您可以在一个页面中添加多个表格。 http://www.pearlbells.co.uk/table-pagination/

tablesorter pager（v 2.10），页码

2 个答案: