4

tablesorter ページャー プラグインの最新バージョンでは、ページ番号のサポートとページあたりのアイテム数が欠落しているようです。旧バージョン（v2.0）では可能でした。これを尋ねる理由は、新しいバージョンで導入された行の ajax フェッチを利用する必要があるためです (一度にすべてのデータをフェッチするとパフォーマンスが低下するため)。前。ただし、v2.0 から v2.10 では多くの変更が行われています。updatePageDisplayまた、これを達成するのに役立つ関数を変更する例も見つかりませんでした。下の画像は、私が達成しようとしていることを示しています。

ここに画像の説明を入力

前もって感謝します。

4

2 に答える 2

10

最新バージョンは、元のバージョンよりもはるかに柔軟です。したがって、このページャー HTML から始めると (このデモに合わせてページ サイズの数値が縮小されます。また、上部の 2 番目のページャー ブロックには、表示されているレコード数と合計レコード数のみが表示されていることに注意してください)。

<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

ライブ デモをご覧になり、カスタマイズされたコードをダウンロードしてください。この拡張バージョンを使用すると、1 つのページに複数のテーブルを追加できます。 http://www.pearlbells.co.uk/table-pagination/

于 2015-12-02T15:08:30.370 に答える