Paginación

En este tema se explica cómo implementar la paginación en escenarios basados en el tiempo de respuesta para cargar las páginas.

Utilice la directiva iscPagination para la paginación con desplazamiento continuo.

Paginación del lado del cliente con desplazamiento continuo

Puede implementar la paginación del lado del cliente cuando el tiempo de respuesta de la API sea lo suficientemente rápido.

Código 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>

Código de controlador

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

Paginación del lado del servidor con desplazamiento continuo

Puede implementar la paginación del lado del servidor cuando el tiempo de respuesta de la API no es suficiente.

Código 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>

Código de controlador

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

Paginación mixta con desplazamiento continuo

Puede implementar paginación mixta cuando el tiempo de respuesta de la API es promedio.

Código 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>

Código de controlador

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

Para obtener más información sobre la directiva iscPagination , consulte la documentación de javascript disponible con la aplicación.

Implementación de ejemplo

Puede consultar los archivos de ejemplo en la carpeta <wscdev.war>/ngstore/store/views/samples/pagination para obtener una mejor comprensión.