ページネーション

このトピックでは、ページをロードするための応答時間に基づいてシナリオにページ編集を実装する方法について説明します。

連続スクロールでのページ編集には、 iscPagination ディレクティブを使用します。

連続スクロールを使用したクライアント・サイドのページ編集

API 応答時間が十分である場合は、クライアント・サイドのページ編集を実装できます。

HTML コード

<div class="defaultHeight" isc-pagination="{
			'type': 'continuousScrolling',
			'nextPageHandler': uiGetNextPageData
			}">
			<div ng-repeat="item in model.ItemList.Item | 
limitTo:ui.itemLinesShownCount track by item.ItemID ">
			</div>
		</div>

コントローラー・コード

model:{
					ItemList:{}
				},
				ui:{
					itemLinesShownCount : 5
				},
				initialize:function(){
					// call mashup to get the data for itemList Array
				
				}
				uiGetNextPageData:function(){
					if(this.ui.itemLinesShownCount <=this.model.ItemList.Item.length){
						this.ui.itemLinesShownCount+=5;
					}
				}

連続スクロールによるサーバー・サイドのページ編集

API 応答時間が十分でない場合は、サーバー・サイドのページ編集を実装できます。

HTML コード

<div class="defaultHeight" isc-pagination="{
					'type': 'continuousScrolling',
					'nextPageHandler': uiGetNextPageData
					}">
		        <div ng-repeat="order in model.OrderList.Page.Output.Orders.Order 
track by order.OrderHeaderKey">
				</div>
			</div>

コントローラー・コード

model:{
					OrderList:{}
				},
				mashupRefs:[
					{
						mashupRefId:"getOrderList",
						mashupId:"getOrderList",
						isPaginated:'true',
      pageSize: 5,
						append:'true',
						appendPath:'Orders.Order',
						modelName:'OrderList'
					}
				
				],
				initialize:function(){
					var apiIput = {} // form the api input
					iscMashup.callPaginatedMashup(this,'getOrderList',apiIput,"START",{});				
				},
				uiGetNextPageData:function(){
					var apiIput = {} // form the api input
					iscMashup.callPaginatedMashup(this,'getOrderList',apiIput,"NEXT",{});
				}

連続スクロールによる混合ページ編集

API 応答時間が平均の場合は、混合ページ編集を実装できます。

HTML コード

<div class="defaultHeight" isc-pagination="{
			'type': 'continuousScrolling',
			'nextPageHandler': uiGetNextPageData
			}">
			<div ng-repeat="order in model.OrderList.Page.Output.Orders.Order | 
limitTo:ui.OrdersShownCount track by order.OrderHeaderKey ">
			</div>
		</div>

コントローラー・コード

model:{
			OrderList:{}
		  },
	 mashupRefs:[
		{
			mashupRefId:"getOrderList",
			mashupId:"getOrderList",
			isPaginated:'true',
      pageSize: 50,
			append:'true',
			appendPath:'Orders.Order',
			modelName:'OrderList'
		}
				
		],
		ui:{
			OrdersShownCount : 5
		    },
		initialize:function()
                  {
			var apiIput = {} // form the api input
			iscMashup.callPaginatedMashup(this,'getOrderList',apiIput,"START",{});				
		    },
			uiGetNextPageData:function(){
			if(this.ui.OrdersShownCount <=this.model.OrderList.Page.Output.Orders.Order.length){
			this.ui.OrdersShownCount+=5;
		    }
		else{
			var apiIput = {} // form the api input
			iscMashup.callPaginatedMashup(this,'getOrderList',apiIput,"NEXT",{}).then(
			function(){
			 this.ui.OrdersShownCount+=5;
				}.bind(this),
				undefined
			);
		     }
		   }

iscPagination ディレクティブについて詳しくは、アプリケーションで使用可能な JavaScript の資料を参照してください。

サンプル実装

理解を深めるために、 <wscdev.war>/ngstore/store/views/samples/pagination フォルダー内のサンプル・ファイルを参照することができます。