Ignite UI™ API ヘルプ

ui.igGridPaging

igGrid コントロールおよび igHierarchicalGrid コントロールはどちらも、グリッド内のページング機能を備えています。ページングを使用するとグリッドは、データの基本セットの制限された数の行を一度にユーザーに描画できます。グリッドの構成方法に応じて、クライアントに一度にすべてのデータを送信するかデータのサブセットを送信するか選択できます。この API のクラス、オプション、イベント、メソッド、およびテーマに関するさらに詳しい情報は上の関連するタブの下で入手可能です。

次のコードスニペットは、igGrid コントロールを初期化する方法を示します。

この API を使用した作業方法の詳細についてはここをクリックしてください。igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コードサンプル

<!doctype html>
<html>
<head>
    <title>Ignite UI igGridPaging</title>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
      <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var products = [
                { "ProductID": 1, "ProductGroup": "9001", "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
                { "ProductID": 2, "ProductGroup": "9001", "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
                { "ProductID": 3, "ProductGroup": "8010", "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
                { "ProductID": 4, "ProductGroup": "9001", "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
                { "ProductID": 316, "ProductGroup": "8010", "Name": "Blade", "ProductNumber": "BL-2036" },
                { "ProductID": 317, "ProductGroup": "9001", "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
                { "ProductID": 318, "ProductGroup": "8010", "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
                { "ProductID": 319, "ProductGroup": "8010", "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
                { "ProductID": 320, "ProductGroup": "9001", "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
            ];
 
            $("#grid").igGrid({
                autoGenerateColumns: true,
                dataSource: products,
                features: [{
                    name: "Paging",
                    type: "local",
                    pageSize: 5
                }]
            });
        });
    </script>
</head>
<body>
    <table id="grid">
    </table>
</body>
</html>
    

currentPageDropDownLeadingLabel
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
ページインデックスを切り替えることができる、ドロップダウンの先頭ラベル。locale.currentPageDropDownLeadingLabel オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            currentPageDropDownLeadingLabel : "Current Page"
        }
    ]
});
 
//Get
var label = $(".selector").igGridPaging("option", "currentPageDropDownLeadingLabel");
 
//Set
$(".selector").igGridPaging("option", "currentPageDropDownLeadingLabel", "Current Page");

currentPageDropDownTooltip
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
ページインデックスドロップダウン用のカスタムのローカライズ済みツールチップ。locale.currentPageDropDownTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            currentPageDropDownTooltip : "Choose Page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igGridPaging("option", "currentPageDropDownTooltip");
 
//Set
$(".selector").igGridPaging("option", "currentPageDropDownTooltip", "Choose Page");

currentPageDropDownTrailingLabel
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
ページインデックスを切り替えることができる、ドロップダウンのローカライズ済み後続ラベル。locale.currentPageDropDownTrailingLabel オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            currentPageDropDownTrailingLabel : "Pages"
        }
    ]
});
 
//Get
var label = $(".selector").igGridPaging("option", "currentPageDropDownTrailingLabel");
 
//Set
$(".selector").igGridPaging("option", "currentPageDropDownTrailingLabel", "Pages");

currentPageIndex

タイプ:: number
デフォルト:: 0

バインドされ、UI に描画される現在のページインデックス。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            currentPageIndex: 5
        }
    ]
});
 
//Get
var page = $(".selector").igGridPaging("option", "currentPageIndex");
 
//Set
$(".selector").igGridPaging("option", "currentPageIndex", 5);

defaultDropDownWidth

タイプ:: number
デフォルト:: 70

ページサイズおよびページインデックスドロップダウン用のドロップダウンの幅。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            defaultDropDownWidth : 100
        }
    ]
});
 
//Get
var width = $(".selector").igGridPaging("option", "defaultDropDownWidth");
 
//Set
$(".selector").igGridPaging("option", "defaultDropDownWidth", 100);

delayOnPageChanged

タイプ:: number
デフォルト:: 350

ページを変更する前に、キー入力までのページドロップダウンの待機時間 (ミリ秒)。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            delayOnPageChanged : 500
        }
    ]
});
 
//Get
var delayOnPageChanged = $(".selector").igGridPaging("option", "delayOnPageChanged");

firstPageLabelText
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
最初のページラベルのローカライズ済みテキスト。locale.firstPageLabelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            firstPageLabelText : "First"
        }
    ]
});
 
//Get
var label = $(".selector").igGridPaging("option", "firstPageLabelText");
 
//Set
$(".selector").igGridPaging("option", "firstPageLabelText", "First");

firstPageTooltip
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
最初のページボタン用のカスタムのローカライズ済みツールチップ。locale.firstPageTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            firstPageTooltip : "Go to first page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igGridPaging("option", "firstPageTooltip");
 
//Set
$(".selector").igGridPaging("option", "firstPageTooltip", "Go to first page");

inherit

タイプ:: bool
デフォルト:: false

子レイアウトで機能継承を有効または無効にします。注: igHierarchicalGrid のみに適用します。

コードサンプル

// Initialize
$(".selector").igHierarchicalGrid({
    features: [
        {
            name: "Paging",
            inherit: true
        }
    ]
});
 
// Get
var inherit = $(".selector").igGridPaging("option", "inherit");

language
継承

タイプ:: string
デフォルト:: "en"

ウィジェットのロケール言語設定を取得または設定します。

コードサンプル

    //Initialize
$(".selector").igGridPaging({
    language: "ja"
});
 
// Get
var language = $(".selector").igGridPaging("option", "language");
 
// Set
$(".selector").igGridPaging("option", "language", "ja");

lastPageLabelText
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
最後のページラベルのローカライズ済みテキスト。locale.lastPageLabelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            lastPageLabelText : "Last"
        }
    ]
});
 
//Get
var label = $(".selector").igGridPaging("option", "lastPageLabelText");
 
//Set
$(".selector").igGridPaging("option", "lastPageLabelText", "Last");

lastPageTooltip
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
最後のページボタン用のカスタムのローカライズ済みツールチップ。locale.lastPageTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            lastPageTooltip : "Go to last page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igGridPaging("option", "lastPageTooltip");
 
//Set
$(".selector").igGridPaging("option", "lastPageTooltip", "Go to last page");

locale

タイプ:: object
デフォルト:: {}

currentPageDropDownLeadingLabel

タイプ:: string
デフォルト:: ""

ページインデックスを切り替えることができる、ドロップダウンの先頭ラベルテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            currentPageDropDownLeadingLabel: "Current Page"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").currentPageDropDownLeadingLabel;
 
//  Set
$(".selector").igGridPaging("option", "locale", { currentPageDropDownLeadingLabel: "Current Page" });

currentPageDropDownTooltip

タイプ:: string
デフォルト:: ""

ページインデックスドロップダウンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            currentPageDropDownTooltip: "Choose Page"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").currentPageDropDownTooltip;
 
//  Set
$(".selector").igGridPaging("option", "locale", { currentPageDropDownTooltip: "Choose Page" });

currentPageDropDownTrailingLabel

タイプ:: string
デフォルト:: ""

ページインデックスを切り替えることができる、ドロップダウンの後続ラベルテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            currentPageDropDownTrailingLabel: "Pages"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").currentPageDropDownTrailingLabel;
 
//  Set
$(".selector").igGridPaging("option", "locale", { currentPageDropDownTrailingLabel: "Pages" });

firstPageLabelText

タイプ:: string
デフォルト:: ""

最初のページラベルのテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            firstPageLabelText: "First "
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").firstPageLabelText;
 
//  Set
$(".selector").igGridPaging("option", "locale", { firstPageLabelText: "First " });

firstPageTooltip

タイプ:: string
デフォルト:: ""

最初のページボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            firstPageTooltip: "Go to first page"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").firstPageTooltip;
 
//  Set
$(".selector").igGridPaging("option", "locale", { firstPageTooltip: "Go to first page" });

lastPageLabelText

タイプ:: string
デフォルト:: ""

最後のページラベルのテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            lastPageLabelText: "Last "
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").lastPageLabelText;
 
//  Set
$(".selector").igGridPaging("option", "locale", { lastPageLabelText: "Last " });

lastPageTooltip

タイプ:: string
デフォルト:: ""

最後のページボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            lastPageTooltip: "Go to last page"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").lastPageTooltip;
 
//  Set
$(".selector").igGridPaging("option", "locale", { lastPageTooltip: "Go to last page" });

nextPageLabelText

タイプ:: string
デフォルト:: ""

次のページラベルのテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            nextPageLabelText: "Next "
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").nextPageLabelText;
 
//  Set
$(".selector").igGridPaging("option", "locale", { nextPageLabelText: "Next " });

nextPageTooltip

タイプ:: string
デフォルト:: ""

次のページボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            pageTooltipFormat: "Go to next page"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").pageTooltipFormat;
 
//  Set
$(".selector").igGridPaging("option", "locale", { pageTooltipFormat: "Go to next page" });

pagerRecordsLabelTemplate

タイプ:: string
デフォルト:: ""

igTemplating のスタイルおよび構文でのカスタムページャーレコードラベルテンプレート。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            pagerRecordsLabelTemplate: "From ${startRecord} to ${endRecord} of ${recordCount}"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").pagerRecordsLabelTemplate;
 
//  Set
$(".selector").igGridPaging("option", "locale", { pagerRecordsLabelTemplate: "From ${startRecord} to ${endRecord} of ${recordCount}" });

pagerRecordsLabelTooltip

タイプ:: string
デフォルト:: ""

ページャーレコードラベル用のツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            pagerRecordsLabelTooltip: "Current records"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").pagerRecordsLabelTooltip;
 
//  Set
$(".selector").igGridPaging("option", "locale", { pagerRecordsLabelTooltip: "Current records" });

pageSizeDropDownLabel

タイプ:: string
デフォルト:: ""

showPageSizeDropDown が true に設定される場合、ページサイズドロップダウンの前に描画されるテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            pageSizeDropDownLabel: "Show "
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").pageSizeDropDownLabel;
 
//  Set
$(".selector").igGridPaging("option", "locale", { pageSizeDropDownLabel: "Show " });

pageSizeDropDownTooltip

タイプ:: string
デフォルト:: ""

ページサイズドロップダウンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            pageSizeDropDownTooltip: "Choose page size"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").pageSizeDropDownTooltip;
 
//  Set
$(".selector").igGridPaging("option", "locale", { pageSizeDropDownTooltip: "Choose page size" });

pageSizeDropDownTrailingLabel

タイプ:: string
デフォルト:: ""

showPageSizeDropDown が true に設定される場合、ページサイズドロップダウンの後に描画されるテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            pageSizeDropDownTrailingLabel: "Show "
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").pageSizeDropDownTrailingLabel;
 
//  Set
$(".selector").igGridPaging("option", "locale", { pageSizeDropDownTrailingLabel: "Show " });

pageTooltipFormat

タイプ:: string
デフォルト:: ""

特定のページに移動するボタンのツールチップテキストのテンプレート。書式文字列は以下の igTemplating スタイルおよび構文が必要です。
pageCountLimit オプションも参照してください。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            pageTooltipFormat: "Page ${index}"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").pageTooltipFormat;
 
//  Set
$(".selector").igGridPaging("option", "locale", { pageTooltipFormat: "Page ${index}" });

prevPageLabelText

タイプ:: string
デフォルト:: ""

前のページラベルのテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            prevPageLabelText: "Previous "
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").prevPageLabelText;
 
//  Set
$(".selector").igGridPaging("option", "locale", { prevPageLabelText: "Previous " });

prevPageTooltip

タイプ:: string
デフォルト:: ""

前のページボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        locale: {
            prevPageTooltip: "Go to previous page"
        }
    }]
});
 
//  Get
var text = $(".selector").igGridPaging("option", "locale").prevPageTooltip;
 
//  Set
$(".selector").igGridPaging("option", "locale", { prevPageTooltip: "Go to previous page" });

nextPageLabelText
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
次のページラベルのローカライズ済みテキスト。locale.nextPageLabelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            nextPageLabelText : "Next"
        }
    ]
});
 
//Get
var label = $(".selector").igGridPaging("option", "nextPageLabelText");
 
//Set
$(".selector").igGridPaging("option", "nextPageLabelText", "Next");

nextPageTooltip
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
次のページボタン用のカスタムのローカライズ済みツールチップ。locale.nextPageTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            nextPageTooltip : "Go to next page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igGridPaging("option", "nextPageTooltip");
 
//Set
$(".selector").igGridPaging("option", "nextPageTooltip", "Go to next page");

pageCountLimit

タイプ:: number
デフォルト:: 10

ページインデックスのドロップダウンリストを表示するためのページの最小数を取得または設定します。このオプション以下の場合、ページの数はページボタンが表示されます。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            pageCountLimit : 5
        }
    ]
});
 
//Get
var count = $(".selector").igGridPaging("option", "pageCountLimit");
 
//Set
$(".selector").igGridPaging("option", "pageCountLimit", 5);

pageIndexUrlKey

タイプ:: string
デフォルト:: null

現在要求されているページインデックスを説明するエンコードされた URL パラメーターの名前を示します。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            pageIndexUrlKey: "page"
        }
    ]
});
 
//Get
var key = $(".selector").igGridPaging("option", "pageIndexUrlKey");
 
//Set
$(".selector").igGridPaging("option", "pageIndexUrlKey", "page");

pagerRecordsLabelTemplate
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
igTemplating のスタイルおよび構文でのカスタムページャーレコードラベルテンプレート。
locale.pagerRecordsLabelTemplate オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            pagerRecordsLabelTemplate : "From ${startRecord} to ${endRecord} of ${recordCount}"
        }
    ]
});
 
//Get
var labelTemplate = $(".selector").igGridPaging("option", "pagerRecordsLabelTemplate");
 
//Set
$(".selector").igGridPaging("option", "pagerRecordsLabelTemplate", "From ${startRecord} to ${endRecord} of ${recordCount}");

pagerRecordsLabelTooltip
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
ページャーレコードラベル用のカスタムのローカライズ済みツールチップ。locale.pagerRecordsLabelTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            pagerRecordsLabelTooltip : "Current records"
        }
    ]
});
 
//Get
var labelTemplate = $(".selector").igGridPaging("option", "pagerRecordsLabelTooltip");
 
//Set
$(".selector").igGridPaging("option", "pagerRecordsLabelTooltip", "Current records");

pageSize

タイプ:: number
デフォルト:: 25

1 ページあたりのデフォルトのレコード数。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            pageSize: 10
        }
    ]
});
 
//Get
var pageSize = $(".selector").igGridPaging("option", "pageSize");
 
//Set
$(".selector").igGridPaging("option", "pageSize", 10);

pageSizeDropDownLabel
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
showPageSizeDropDown が true の場合にページサイズドロップダウンの前に描画されるラベル。
locale.pageSizeDropDownLabel オプションを使用します。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            pageSizeDropDownLabel: "Rows"
        }
    ]
});
 
//Get
var label = $(".selector").igGridPaging("option", "pageSizeDropDownLabel");
 
//Set
$(".selector").igGridPaging("option", "pageSizeDropDownLabel", "Rows");

pageSizeDropDownLocation

タイプ:: enumeration
デフォルト:: above

ページサイズドロップダウンの場所。グリッドヘッダー上、ページャー内、またはページリンクの隣に描画できます。

メンバー

above
タイプ:string
グリッドヘッダーの上に描画されます。
inpager
タイプ:string
ページリンクの隣に描画されます。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            pageSizeDropDownLocation: "inpager"
        }
    ]
});
//Get
var location = $(".selector").igGridPaging("option", "pageSizeDropDownLocation");
//Set
$(".selector").igGridPaging("option", "pageSizeDropDownLocation", "inpager");

pageSizeDropDownTooltip
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
ページサイズドロップダウン用のカスタムのローカライズ済みツールチップ。locale.pageSizeDropDownTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            pageSizeDropDownTooltip : "Choose page size"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igGridPaging("option", "pageSizeDropDownTooltip");
 
//Set
$(".selector").igGridPaging("option", "pageSizeDropDownTooltip", "Choose page size");

pageSizeDropDownTrailingLabel
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
showPageSizeDropDownの場合にページサイズドロップダウンの後続ラベル。
locale.pageSizeDropDownTrailingLabel オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            pageSizeDropDownTrailingLabel : "Rows"
        }
    ]
});
 
//Get
var label = $(".selector").igGridPaging("option", "pageSizeDropDownTrailingLabel");
 
//Set
$(".selector").igGridPaging("option", "pageSizeDropDownTrailingLabel", "Rows");

pageSizeList

タイプ:: enumeration
デフォルト:: []

グリッドヘッダーのドロップダウンに配置されるグリッドのページサイズに変更可能な定義済みのページサイズ。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            pageSizeList : [10, 20, 30]
        }
    ]
});
//Get
var pagesList = $(".selector").igGridPaging("option", "pageSizeList");
//Set
$(".selector").igGridPaging("option", "pageSizeList", "10,20,30,40");

pageSizeUrlKey

タイプ:: string
デフォルト:: null

現在要求されているページサイズを説明するエンコードされた URL パラメーターの名前を示します。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            pageSizeUrlKey: "psize"
        }
    ]
});
 
//Get
var key = $(".selector").igGridPaging("option", "pageSizeUrlKey");
 
//Set
$(".selector").igGridPaging("option", "pageSizeUrlKey", "psize");

pageTooltipFormat
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
特定のページに移動するボタンのツールチップテキストテンプレート。書式文字列は igTemplating スタイルおよび構文に従います。また pageCountLimit オプションも参照してください。
locale.pageTooltipFormat オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            pageTooltipFormat : "Open page"
        }
    ]
});
 
//Get
var key = $(".selector").igGridPaging("option", "pageTooltipFormat");
 
//Set
$(".selector").igGridPaging("option", "pageTooltipFormat", "Open page");

persist

タイプ:: bool
デフォルト:: true

状態間でページングの永続化を有効/無効にします。

コードサンプル

//Initialize
$(".selector").igGrid({
features : [
    {
        name : "Paging",
        persist : false
    }
]
});
 
//Get
var persist = $(".selector").igGridPaging("option", "persist");
 
//Set
$(".selector").igGridPaging("option", "persist", true);

prevPageLabelText
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
前のページラベルのローカライズ済みテキスト。locale.prevPageLabelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            prevPageLabelText : "Previous"
        }
    ]
});
 
//Get
var label = $(".selector").igGridPaging("option", "prevPageLabelText");
 
//Set
$(".selector").igGridPaging("option", "prevPageLabelText", "Previous");

prevPageTooltip
削除

タイプ:: string
デフォルト:: ""

このオプションは 2017.2 バージョン以降サポートされません。
前のページボタン用のカスタムのローカライズ済みツールチップ。locale.prevPageTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            prevPageTooltip : "Go to previous page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igGridPaging("option", "prevPageTooltip");
 
//Set
$(".selector").igGridPaging("option", "prevPageTooltip", "Go to previous page");

recordCountKey

タイプ:: string
デフォルト:: null

データソース内のレコードの総数を保持する応答内のプロパティ。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            recordCountKey: "totalCount"
        }
    ]
});
 
//Get
var totalCount = $(".selector").igGridPaging("option", "recordCountKey");
 
//Set
$(".selector").igGridPaging("option", "recordCountKey", "totalCount");

regional
継承

タイプ:

enumeration

デフォルト:

defaults

ウィジェットの領域設定を取得または設定します。

コードサンプル

//Initialize
$(".selector").igGridPaging({
regional: "ja"
});
// Get
var regional = $(".selector").igGridPaging("option", "regional");
// Set
$(".selector").igGridPaging("option", "regional", "ja");

showFirstLastPages

タイプ:: bool
デフォルト:: true

最初のページボタンと最後のページボタンを描画するかどうかを指定するオプション。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            showFirstLastPages : false
        }
    ]
});
 
//Get
var showFirstLast = $(".selector").igGridPaging("option", "showFirstLastPages");
 
//Set
$(".selector").igGridPaging("option", "showFirstLastPages", false);

showPagerRecordsLabel

タイプ:: bool
デフォルト:: true

現在描画されているレコードのサマリーラベルを表示するかどうかを指定するオプション。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            showPagerRecordsLabel: false
        }
    ]
});
 
//Get
var showRecordsLabel = $(".selector").igGridPaging("option", "showPagerRecordsLabel");
 
//Set
$(".selector").igGridPaging("option", "showPagerRecordsLabel", false);

showPageSizeDropDown

タイプ:: bool
デフォルト:: true

False の場合、ページサイズの変更を許すドロップダウンは UI に描画されません。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            showPageSizeDropDown: false
        }
    ]
});
 
//Get
var showDropDown = $(".selector").igGridPaging("option", "showPageSizeDropDown");
 
//Set
$(".selector").igGridPaging("option", "showPageSizeDropDown", false);

showPrevNextPages

タイプ:: bool
デフォルト:: true

前のページボタンと次のページボタンを描画するかどうかを指定するオプション。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            showPrevNextPages : false
        }
    ]
});
 
//Get
var showPages = $(".selector").igGridPaging("option", "showPrevNextPages");
 
//Set
$(".selector").igGridPaging("option", "showPrevNextPages", false);

type

タイプ:: enumeration
デフォルト:: null

ページングのタイプ。すべてのページング機能を $.ig.DataSource にデリゲートします。

メンバー

remote
タイプ:string
ページングがリモートエンドポイントにより実行されます。
local
タイプ:string
ページングは $.ig.DataSource によってローカルで実行されます。

コードサンプル

// Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Paging",
            type: "local"
        }
    ]
});
//Get
var type = $(".selector").igGridPaging("option", "type");
//Set
$(".selector").igGridPaging("option", "type", "local");

visiblePageCount

タイプ:: number
デフォルト:: 5

常に表示されているアクティブページに隣接および含むページボタン数。非表示のページの場合、前ボタンおよび次ボタンを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Paging",
            visiblePageCount : 10
        }
    ]
});
 
//Get
var visCount = $(".selector").igGridPaging("option", "visiblePageCount");
 
//Set
$(".selector").igGridPaging("option", "visiblePageCount", 10);

Ignite UI コントロールイベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

pageIndexChanged

キャンセル可能:: false

ページインデックスが変更された後、ただしグリッドデータの再バインドの前に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridpagingpageindexchanged", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igGrid widget to which the igGridPaging is bound
    ui.owner.grid;
 
    //  Get the current page index
    ui.pageIndex;
});
 
//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        pageIndexChanged: function (evt, ui) { ... }
    }]
});

pageIndexChanging

キャンセル可能:: true

ページインデックスが変更される前に発生するイベント。
ページインデックスの変更をキャンセルするには、false を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridpagingpageindexchanging", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igGrid widget to which the igGridPaging is bound
    ui.owner.grid;
 
    //  Get the current page index
    ui.currentPageIndex;
 
    //  Get the index of the page that is about to be opened
    ui.newPageIndex;
});
 
//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        pageIndexChanging: function (evt, ui) { ... }
    }]
});

pagerRendered

キャンセル可能:: false

ページャーのフッターが描画された後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridpagingpagerrendered", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igGrid widget to which the igGridPaging is bound
    ui.owner.grid;
 
    //  Get the data source of the grid
    ui.dataSource;
});
 
//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        pagerRendered: function (evt, ui) { ... }
    }]
});

pagerRendering

キャンセル可能:: true

ページャーフッター (グリッドレコードの下の領域全体) が描画される前に発生するイベント。
ページャーのフッターの描画をキャンセルするには、false を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridpagingpagerrendering", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igGrid widget to which the igGridPaging is bound
    ui.owner.grid;
 
    //  Get the data source of the grid
    ui.dataSource;
});
 
//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        pagerRendering: function (evt, ui) { ... }
    }]
});

pageSizeChanged

キャンセル可能:: false

ページサイズドロップダウンからページサイズが変更された後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridpagingpagesizechanged", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igGrid widget to which the igGridPaging is bound
    ui.owner.grid;
 
    //  Get the current page size in the grid
    ui.pageSize;
});
 
//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        pageSizeChanged: function (evt, ui) { ... }
    }]
});

pageSizeChanging

キャンセル可能:: true

ページサイズドロップダウンからページサイズが変更されようとしているときに発生するイベント。
ページサイズの変更をキャンセルするには、false を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridpagingpagesizechanging", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igGrid widget to which the igGridPaging is bound
    ui.owner.grid;
 
    //  Get the current page size in the grid
    ui.currentPageSize;
 
    //  Get the new page size in the grid that is about to be set
    ui.newPageSize;
});
 
//Initialize
$(".selector").igGrid({
    features: [{
        name: "Paging",
        pageSizeChanging: function (evt, ui) { ... }
    }]
});

詳細の表示

changeLocale

.igGridPaging( "changeLocale" );
ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。
コードサンプル

$(".selector").igGridPaging("changeLocale");
destroy

.igGridPaging( "destroy" );
ページャー領域のすべての要素を削除、イベントのバインドを解除、およびページングのデータフィルタリングを破棄してデータをリセットして igGridPaging 機能を破棄します。
コードサンプル

$(".selector").igGridPaging("destroy");
pageIndex

.igGridPaging( "pageIndex", [index:number] );

返却型:

number

返却型の説明:

パラメーターが指定していない場合、現在のページインデックスを返します。
現在のページインデックスを取得または設定し、データバインドとページングを $.ig.DataSource にデリゲートします。
- index
- タイプ:number
- オプション
- 移動先のページインデックス。
コードサンプル

//Get
var index = $(".selector").igGridPaging("pageIndex");

//Set
$(".selector").igGridPaging("pageIndex", 4);
pageSize

.igGridPaging( "pageSize", [size:number] );

返却型:

number

返却型の説明:

パラメーターが指定していない場合、現在のページサイズを返します。
ページサイズを取得または設定します。パラメーターを指定しない場合、単に現在のページサイズを返します。
- size
- タイプ:number
- オプション
- ページサイズ。
コードサンプル

//Get
var size = $(".selector").igGridPaging("pageSize");

//Set
$(".selector").igGridPaging("pageSize", 16);

ui-iggrid-firstpage ui-iggrid-paging-item ui-state-default ui-corner-left

最初のページボタンおよびラベルが描画される領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-firstpageimg ui-icon ui-icon-arrowstop-1-w

アイコンのスパンを保持する最初のページ領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-firstpageimgdisabled ui-icon ui-state-disabled ui-icon-arrowstop-1-w

アイコンが無効のときにそのスパンを保持する最初のページ領域に適用されるクラス。
ui-iggrid-firstpagelabel

最初のページのラベル (スパン) に適用されるクラス。
ui-iggrid-firstpagelabeldisabled ui-state-disabled

最初のページが無効のときにそのラベル (スパン) に適用されるクラス。
ui-iggrid-lastpage ui-iggrid-paging-item ui-state-default ui-corner-right

最後のページボタンおよびラベルが描画される領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-lastpageimg ui-icon ui-icon-arrowstop-1-e

アイコンのスパンを保持する最後のページ領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-lastpageimgdisabled ui-icon ui-state-disabled ui-icon-arrowstop-1-e

アイコンが無効のときにそのスパンを保持する最後のページ領域に適用されるクラス。
ui-iggrid-lastpagelabel

最後のページのラベル (span) に適用されるクラス。
ui-iggrid-lastpagelabeldisabled ui-state-disabled

最後のページが無効のときにそのラベル (スパン) に適用されるクラス。
ui-iggrid-nextpage ui-iggrid-paging-item ui-state-default

次のページボタンおよびラベルが描画される領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-nextpageimg ui-icon ui-icon-triangle-1-e

アイコンのスパンを保持する次のページ領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-nextpageimgdisabled ui-icon ui-state-disabled ui-icon-triangle-1-e

アイコンが無効のときにそのスパンを保持する次のページ領域に適用されるクラス。
ui-iggrid-nextpagelabel

次のページのラベル (span) に適用されるクラス。
ui-iggrid-nextpagelabeldisabled ui-state-disabled

次のページが無効のときにそのラベル (スパン) に適用されるクラス。
ui-iggrid-page ui-state-default ui-corner-all

ページコンテナー要素 (リスト項目) に適用されるクラス。
ui-iggrid-pagecurrent ui-state-active ui-corner-all

現在のページ (現在のページインデックスに対応する) に適用されるクラス。
ui-iggrid-pagedropdown

そこからページインデックスを変更できるエディタードロップダウンに適用されるクラス。
ui-iggrid-pagedropdowncontainer

そこからページインデックスを変更できるエディタードロップダウンを保持する要素に適用されるクラス。
ui-iggrid-pagedropdownlabels

そこからページインデックスを変更できるエディタードロップダウンの前後のスパンに適用されるクラス。
ui-iggrid-pagefocused ui-state-focus

(キーボードでのナビゲーションを使用するときに) フォーカスのある現在のページに適用されるクラス。
ui-iggrid-page-hover ui-state-hover

ページリスト項目がホバー状態のときに、その項目に適用されるクラス。
ui-iggrid-pagelink ui-helper-reset

マウスでクリックできるページリンクに適用されるクラス。
ui-iggrid-pagelinkcurrent

現在のページ項目のアンカーに適用されるクラス。
ui-helper-reset ui-iggrid-pagelist ui-iggrid-paging-item

すべてのページを保持する UL リストに適用されるクラス。
ui-widget ui-iggrid-pager ui-helper-clearfix ui-corner-bottom ui-widget-header ui-iggrid-footer

ページャー領域に適用されるクラス。
ui-iggrid-pagerrecordslabel ui-iggrid-results

あるレコード総数のうち描画されるレコード数を表示するラベルに適用されるクラス。
ui-iggrid-paging

最初、最後、前、次の各ボタン、ページリンク、およびページインデックスドロップダウンが描画されるフッターの右側の領域に適用されるクラス。
ui-iggrid-pagesizedropdown

そこからページサイズを変更できるエディタードロップダウンに適用されるクラス。
ui-helper-clearfix ui-iggrid-pagesizedropdowncontainer

ページサイズドロップダウンを保持する要素に適用されるクラス。
ui-widget ui-helper-clearfix ui-iggrid-pagesizedropdowncontainerabove ui-iggrid-toolbar ui-widget-header and ui-corner-top

ページサイズドロップダウンエディターのコンテナーがヘッダーの上に描画されるときに、そのコンテナーに適用されるクラス。
ui-iggrid-pagesizelabel

そこからページサイズを変更できるエディタードロップダウンラベルに適用されるクラス。
ui-iggrid-results

ある合計値から現在描画されるレコードインデックスを表示するラベルに適用されるクラス。
ui-iggrid-prevpage ui-iggrid-paging-item ui-state-default

前のページボタンおよびラベルが描画される領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-prevpageimg ui-icon ui-icon-triangle-1-w

アイコンのスパンを保持する前のページ領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-prevpageimgdisabled ui-icon ui-state-disabled ui-icon-triangle-1-w

アイコンが無効のときにそのスパンを保持する前のページ領域に適用されるクラス。
ui-iggrid-prevpagelabel

前のページのラベル (span) に適用されるクラス。
ui-iggrid-prevpagelabeldisabled ui-state-disabled

前のページが無効のときにそのラベル (スパン) に適用されるクラス。

Ignite UI for jQuery | API リファレンス

ui.igGridPaging

コード サンプル

関連サンプル

関連トピック

依存関係

継承

コードサンプル