Pagination

This topic explains how to implement pagination in scenarios based on the response time to load the pages.

Use iscPagination directive for pagination with continuous scroll.

Client-side pagination with continuous scroll

You can implement client side pagination when API response time is fast enough.

HTML code

<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>

Controller code

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;
					}
				}

Server-side pagination with continuous scroll

You can implement server-side pagination when API response time is not good enough.

HTML code

<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>

Controller code

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",{});
				}

Mixed pagination with continuous scroll

You can implement mixed pagination when API response time is average.

HTML code

<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>

Controller code

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
			);
		     }
		   }

For more information about the iscPagination directive, refer the javascript documentation available with the application.

Sample implementation

You can refer the sample files in <wscdev.war>/ngstore/store/views/samples/pagination folder for better understanding.