Processing...
Description & Source Code

The paging feature allows large data to be distributed in a page representation in listbox. 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.

paging.zul
<zk>
	<zscript><![CDATA[
		List items = new demo.data.BigList(1000); //a big list of Integer
	]]></zscript>
	<listbox id="listbox" mold="paging" pageSize="10">
		<listitem forEach="${items}">
			<listcell label="${each}-1" />
			<listcell label="${each}-2" />
			<listcell label="${each}-3" />
			<listcell label="${each}-4" />
		</listitem>
	</listbox>
</zk>
			
paging_ctrl.zul
<vlayout>
	<radiogroup>
		<attribute name="onCheck"><![CDATA[
			listbox.pagingPosition = self.selectedItem.label;
		]]></attribute>
		<vlayout>
			<label value="Paging Indicator Placement :" />
			<radio label="top" />
			<radio label="bottom" checked="true" />
			<radio label="both" />
		</vlayout>
	</radiogroup>
	<div height="10px"/>
	<checkbox label="Switch Paging Mold">
		<attribute name="onCheck"><![CDATA[
			listbox.pagingChild.mold = "os".equals(listbox.pagingChild.mold) ? "default" : "os";
		]]></attribute>
	</checkbox>
</vlayout>
BigList.java
package demo.data;

import java.util.AbstractList;

public class BigList extends AbstractList<Integer> {

	private int size;

	public BigList(int sz) {
		if (sz < 0)
			throw new IllegalArgumentException("Negative not allowed: " + sz);
		size = sz;
	}

	public int size() {
		return size;
	}

	public Integer get(int j) {
		return Integer.valueOf(j);
	}

}