ページング機能を実装する
ページング機能を有効にするには、テンプレート／コントローラー双方の修正が必要となります。
<div ui-grid="myGrid" ui-grid-pagination></div>
angular.module('myApp', [ 'ui.grid', 'ui.grid.pagination' ])
.controller('MyController', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
$scope.myGrid = {
enablePaginationControls: true,
paginationPageSize: 5,
paginationPageSizes: [3, 5, 7 ],
...中略...
};
}]);
ページングを有効にするには、現在のモジュールから（ui.gridに加えて）ui.grid.paginationモジュールへの依存関係を設定した上で、グリッド要素（<div>要素）に対してui-grid-pagination属性を付与します。また、コントローラー側では、以下のようなグローバルパラメーターを設定してください。
| パラメーター | 概要 |
|---|---|
| enablePaginationControls | ページングのためのコントローラー（ページャー）を表示 |
| paginationPageSize | デフォルトのページサイズ |
| paginationPageSizes | 選択できるページサイズの候補（配列） |
この例であれば、3、5、7件から選択できるページャーを表示します。paginationPageSizeパラメーターには、paginationPageSizesパラメーターにない値を指定してもエラーにはなりませんが、アプリとしては不自然です。まずは、候補内からデフォルト値を選択すべきでしょう。
グリッド表の下部に、以下のようなページャーが表示されること、ページャーでページを移動できることを確認してください。
カスタムのページャーを準備する
ページャーは自前で準備することもできます。たとえば以下は、グリッド表の下部に独自の前後ボタンと、指定ページへの移動ボタンを付与する例です。
<div ui-grid="myGrid" ui-grid-pagination></div>
<div>{{api.getPage()}}/{{api.getTotalPages()}}</div>
<button type="button" ng-click="api.previousPage()">
前ページへ</button>
<button type="button" ng-click="api.nextPage()">
次ページへ</button>
｜
<input type="number" ng-model="pagenum" size="3" />
<button type="button" ng-click="api.seek(pagenum)">
指定されたページへ</button>
angular.module('myApp', [ 'ui.grid', 'ui.grid.pagination' ])
.controller('MyController', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
$scope.pagenum = 1;
$scope.myGrid = {
enablePaginationControls: false,
paginationPageSize: 5,
onRegisterApi: function(gridApi){
$scope.api = gridApi.pagination;
},
...中略...
};
}]);
onRegisterApiパラメーターには、グリッド表が初期化されたタイミングで呼び出されるコールバック関数を登録します。引数にUI Grid API（gridApi）が渡されますので、そのpaginationオブジェクトを、あとからテンプレートで利用できるよう、スコープ変数に登録しておきます。paginationオブジェクトは、ページング関連の操作に関わる機能を提供します。
あとは、テンプレート側に配置したボタンからpaginationオブジェクトのメソッドを呼び出すだけです。ここで利用しているのは、以下のメンバーです。
| メソッド | 概要 |
|---|---|
| getPage() | 現在のページ数を取得 |
| getTotalPages() | 総ページ数を取得 |
| nextPage() | 次のページに移動 |
| previousPage() | 前のページに移動 |
| seek(page) | 指定されたページ（page）に移動 |
フィルター機能を実装する
フィルター機能を有効にすることで、列単位にキーワード一致（部分一致）したデータのみを検索できます。
angular.module('myApp', [ 'ui.grid'])
.controller('MyController', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
$scope.myGrid = {
enableFiltering: true,
columnDefs: [
{
field: 'cid',
displayName: '商品コード',
cellClass: 'strong',
enableHiding: false
},
{
field: 'name',
displayName: '商品名',
filter: {
condition: uiGridConstants.filter.STARTS_WITH,
placeholder: '前方一致'
}
},
{
field: 'price',
displayName: '価格',
cellFilter: 'currency : "￥" :0',
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
placeholder: '以上'
},
{
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
placeholder: '以下'
}
]
},
{
field: 'from',
displayName: '産地'
},
{
field: 'ship',
displayName: '出荷日',
cellFilter: 'date: "yyyy年MM月dd日"',
enableFiltering: false
}
],
...中略...
};
}]);
フィルター機能を実装するには、グローバルパラメーターとしてenableFilteringパラメーターをtrueに設定した上で、columnDefs－filterパラメーターから列単位の挙動を設定します。filterパラメーター配下で利用できるパラメーター情報には、以下のようなものがあります。
| パラメーター | 概要 |
|---|---|
| placeholder | テキストボックスに表示する透かし文字 |
| term | 初期値 |
| condition | 比較条件（設定値は以下の表を参照） |
| 設定値 | 概要 |
|---|---|
| CONTAINS | 部分一致 |
| EXACT | 完全一致 |
| STARTS_WITH | 前方一致 |
| ENDS_WITH | 後方一致 |
| GREATER_THAN_OR_EQUAL | 以上 |
| LESS_THAN_OR_EQUAL | 以下 |
| GREATER_THAN | より大きい |
| LESS_THAN | 未満 |
| NOT_EQUAL | 等しくない |
検索条件を表す定数値は、uiGridConstantsサービスで提供されています。あらかじめコントローラー側で注入しておくのを忘れないようにしてください。
filters（複数形）パラメーターに配列を指定することで、複数の検索ボックスを設置することもできます。この場合、検索条件はand条件となります。
