Paginazione

Questo argomento spiega come implementare la paginazione in scenari basati sul tempo di risposta per caricare le pagine.

Utilizzare la direttiva iscPagination per l'impaginazione con scorrimento continuo.

Paginazione lato client con scorrimento continuo

È possibile implementare la paginazione lato client quando il tempo di risposta API è abbastanza veloce.

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

Codice unità di controllo

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

Paginazione lato server con scorrimento continuo

È possibile implementare la paginazione lato server quando il tempo di risposta API non è sufficiente.

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

Codice unità di controllo

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

Impaginazione mista con scorrimento continuo

È possibile implementare la paginazione mista quando il tempo di risposta API è medio.

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

Codice unità di controllo

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

Per ulteriori informazioni sulla direttiva iscPagination , fare riferimento alla documentazione javascript disponibile con l'applicazione.

Implementazione di esempio

È possibile fare riferimento ai file di esempio nella cartella <wscdev.war>/ngstore/store/views/samples/pagination per una migliore comprensione.