Paging
Paging
- Demonstration: Paging (with Grid), Paging (with Listbox), Paging (with Tree)
- Java API: Paging
- JavaScript API: Paging
- Style Guide: Paging
Employment/Purpose
A paging component is used with another component to separate long content into multiple pages. If a component has long content to display, you could separate them into pages, and then use a paging component as a controller to allow the user decide which page to display.
The listbox, grid and tree components support the paging intrinsically, so you don't need to specify a paging component explicitly. In other words, they will instantiate and manage a paging component automatically if the paging mold is specified. Of course, you could specify an external paging component, if you want to have different visual layout, or to control multiple listboxes, grids and/or trees with one single paging component.
Example
For example, suppose you have 100 items and prefer to show 20 items at a time, then you can use the paging components as follows.
<vbox>
<paging totalSize="100" pageSize="20"/>
</vbox>
When a user clicks on the hyperlinks, the onPaging event is sent with an instance of PagingEvent to the paging component. To decide which portion of your 100 items are visible, you should add a listener to the paging component. Please note that the code below is pseudo code. For real examples, please refer to User Cases below.
<zk>
<div id="content"/> <!-- the long content is displayed here -->
<paging id="paging" />
<zscript>
List result = new SearchEngine().find("ZK");
//assume SearchEngine.find() will return a list of items.
paging.setTotalSize(result.size());
paging.addEventListener("onPaging", new org.zkoss.zk.ui.event.EventListener() {
public void onEvent(Event event) {
int pgno = event.getPaginal().getActivePage();
int ofs = pgno * event.getPaginal().getPageSize();
new Viewer().redraw(content,
result, ofs, ofs + event.getPaginal().getPageSize() - 1);
//assume redraw(Div content, List result, int b, int e) will display
//the result to the content component from the b-th item to the e-th item
}
}
);
</zscript>
</zk>
Properties
Disabled
Since 8.0.3
Paging.setDisabled(boolean) is used to disable the paging component. It can block the user from navigating through the pagination. For example,
<paging pageSize="2" disabled="true"/>
Limitation
Paging can not apply stubonly at the same time. For example,
<listbox mold="paging" pageSize="1" >
<listitem >
<listcell stubonly="true"/>
</listitem>
<listitem>
<listcell />
</listitem>
</listbox>
Although paging will invalidate listbox and its children, stubonly needs the referred widget in client side which is detached during paging and throws mounting error.
Supported Events
Event: PagingEvent
Notifies one of the pages of a multi-page component is selected by the user. |
- Inherited Supported Events: XulElement
Supported Molds
Available molds of a component are defined in lang.xml embedded in zul.jar.
Supported Children
*NONE
Use Cases
Version | Description | Example Location |
---|---|---|
3.6 | Small talks |
Version History
Version | Date | Content |
---|---|---|