The paging feature allows large data to be distributed in a page representation in grid.
A paging indicator tracks the current page relative to all pages, and it may be placed at top, bottom, or both top and bottom.
Two different molds (look and feel) are available for the paging feature.

<div apply="org.zkoss.bind.BindComposer"
	viewModel="@id('vm') @init('demo.grid.paging.PagingViewModel')">
	<grid id="grid" 
		model="@load(vm.allPurchases)"
		mold="paging" pageSize="6">
		<columns>
			<column hflex="1" label="Order #" align="left" />
			<column hflex="2" label="Item Purchased" align="center" />
			<column hflex="2" label="Purchased Time" align="center" />
			<column hflex="1" label="Paid" align="center" />
		</columns>
		<template name="model">
			<row>
				<label value="@load(each.id)" />
				<listbox mold="select" hflex="1"
					model="@load(vm.availableItems)" selectedItem="@bind(each.item)" >
					<template name="model">
						<listitem label="@load(each)" />
					</template>
				</listbox>
				<timebox format="a hh:mm:ss" mold="rounded" hflex="1" 
					value="@load(each.time)" />
				<checkbox hflex="1" 
					label="@load(each.paid ? 'yes' : 'no')"
					checked="@bind(each.paid)" />
			</row>
		</template>
	</grid>
</div>

<vlayout>
	<zscript><![CDATA[
		void changePosition(String pos){
			grid.pagingPosition = pos;
		}
		
		void changeMold(String mold){
			grid.pagingChild.mold = mold;
		}
	]]></zscript>
	<radiogroup onCheck="changePosition(self.selectedItem.label)">
		<vlayout>
			<label value="Select a Placement for the Paging Indicator:"/>
			<radio label="top" />
			<radio label="bottom" checked="true" />
			<radio label="both" />
		</vlayout>
	</radiogroup>
	<separator height="10px"/>
	<radiogroup onCheck="changeMold(self.selectedItem.label)">
		<vlayout>
			<label value="Select a Mold for the Paging:"/>
			<radio label="default" checked="true" />
			<radio label="os" />
		</vlayout>
	</radiogroup>
</vlayout>

package demo.grid.paging;

import java.util.List;

import demo.data.Purchase;
import demo.data.PurchaseData;

public class PagingViewModel {
	private PurchaseData data = new PurchaseData();
	
	public List<Purchase> getAllPurchases() {
		return data.getAllPurchases();
	}
	
	public List<String> getAvailableItems() {
		return data.getAvailableItems();
	}
}

package demo.data;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Random;

public class PurchaseData {
	
	private final List<String> availableItems = new ArrayList<String>();
	
	private List<Purchase> allPurchases = new ArrayList<Purchase>();
	private int TOTAL_PURCHASES = 25;
	private Random randomGenerator = new Random();
	
	public PurchaseData() {
		availableItems.add("Java");
		availableItems.add("Latte");
		availableItems.add("Lungo");
		availableItems.add("Macchiato");
		availableItems.add("Mocha");
		generatePurchases();
	}
	
	
	public List<Purchase> getAllPurchases() {
		return this.allPurchases;
	}
	
	public List<String> getAvailableItems() {
		return availableItems;
	}
	
	private void generatePurchases() {
		for(int i=0; i<TOTAL_PURCHASES; i++) {
			int id = (i + 101);
			String purchasedItem = availableItems.get(randomGenerator.nextInt(availableItems.size()));
			Date randomDate = new Date(Math.abs(System.currentTimeMillis() - randomGenerator.nextInt(1000000)));
			boolean paid = randomGenerator.nextBoolean();
			allPurchases.add(new Purchase(id, purchasedItem, randomDate, paid));
		}
	}
}

package demo.data;

import java.util.Date;

public class Purchase {
	private int id;
	private String item;
	private Date time;
	private boolean paid;
	
	public Purchase(int orderId, String orderItem, Date purchaseTime, boolean paid) {
		this.id = orderId;
		this.item = orderItem;
		this.time = purchaseTime;
		this.paid = paid;
	}

	public int getId() {
		return id;
	}

	public void setId(int orderId) {
		this.id = orderId;
	}

	public String getItem() {
		return item;
	}

	public void setItem(String orderedItem) {
		this.item = orderedItem;
	}

	public Date getTime() {
		return time;
	}

	public void setTime(Date purchaseTime) {
		this.time = purchaseTime;
	}

	public boolean isPaid() {
		return paid;
	}

	public void setPaid(boolean paid) {
		this.paid = paid;
	}

}