ページング

wijGridのページング機能でコードせずに大量のデータを一定サイズのページに分けて、見やすく表示することが可能です。デフォルトでは、グリッドは連続した１つのウィンドウで表示されます。allowPaging オプションを true（デフォルトでは False）に設定することでページングを有効にすることができます。ページングが設定されると、実行時に、ユーザーは、グリッドの上部または下部のボタンまたはリンクからグリッドの各ページに移動できます。

ページングボタンがデフォルトでグリッド下部のグリッドのフッターに表示されます。position オプションを設定することで、ページングボタンの位置を変更できます。デフォルトでは、グリッドの各ページに10 項目が表示されます。pageSize オプションを設定して、ページのサイズを変更できます。

たとえば、以下の画面では pageSize が「3」と position が「Top」に設定されています。

画像
スクリプト

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            allowPaging: true, 
            allowVirtualScrolling: true,
            pageSize: 3, 
            pagerSettings: { position: "top", pageButtonCount:"2"}, 
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C'],
                [1, 'United States', 'Curry, John', 'G'],
                [23, 'Canada', 'Aalto, Antti', 'C', 'L'],
                [45, 'Canada', 'Acton, Keith', 'C', 'R'],
                [69, 'Canada', 'Ahern, Fred', 'RW', 'R']
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
</script>

wijgrid ウィジェットでは pagerMode オプションを使用してページングを番号システムや次へ／前へシステムなどに設定できます。

設定	説明	結果
nextPrevious	前へ／次へボタンのみを表示します。
nextPreviousFirstLast	前へ／次へ／先頭へ／最後への各ボタンを表示します。
numeric（デフォルト）	ページに直接アクセスするための数字リンクボタンを表示します。デフォルトで、最大10個のページ番号が表示されます。pageButtonCountで表示されるページ番号の数を変更できます。
numericFirstLast	ページ番号リンクと先頭へ／最後へページのボタンを表示します。デフォルトで、最大10個のページ番号が表示されます。pageButtonCountで表示されるページ番号の数を変更できます。

なお、ページャーボタンのツールチップテキストをカスタマイズまたはローカライズすることが可能です。詳細については、「カスタム Grid 文字列」トピックを参照してください。

関連トピック