4

最新版本的 tablesorter pager 插件似乎缺少页码支持和每页项目数。使用旧版本（v2.0），可以这样做。提出这个问题的原因是因为我们需要利用新版本中引入的 ajax 获取行（因为一次获取​​所有数据会导致性能下降），同时保持表的外观和感觉与前。但是，从 v2.0 到 v2.10 发生了很多变化。我也找不到任何修改updatePageDisplay有助于实现此目的的功能的示例。下图显示了我要完成的工作：

在此处输入图像描述

提前致谢。

4

2 回答 2

10

最新版本比原始版本灵活得多。所以，如果我们从这个寻呼机 HTML 开始（页面大小数字减少以匹配这个演示；还要注意顶部的第二个寻呼机块只显示可见和总记录数）

<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;
});
于 2013-05-31T05:35:15.760 回答
0

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

于 2015-12-02T15:08:30.370 回答