Paging"
Maya001122 (talk | contribs) m |
m (correct highlight (via JWB)) |
||
(One intermediate revision by one other user not shown) | |||
Line 1: | Line 1: | ||
{{ZKDevelopersGuidePageHeader}} | {{ZKDevelopersGuidePageHeader}} | ||
− | A < | + | A <code>paging</code> component is used to separate long content into multiple pages. For example, assume that you have 100 items and prefer to show 20 items at a time, you can use the <code>paging</code> components as follows. |
<source lang="xml" > | <source lang="xml" > | ||
Line 9: | Line 9: | ||
</source> | </source> | ||
− | When a user clicks the paging component, the < | + | When a user clicks the paging component, the <code>onPaging</code> event is sent along with an instance of <javadoc>org.zkoss.zul.event.PagingEvent</javadoc> to the <code>paging</code> component. To decide which portion of your 100 items are visible, you can add a listener to the <code>paging</code> component. Please note that the code below is pseudo code, you can find a real world example [[Small_Talks/2008/June/Use_Load-On-Demand_to_Handle_Huge_Data |here]]. |
<source lang="xml" > | <source lang="xml" > | ||
Line 51: | Line 51: | ||
=== Paging with List Boxes and Grids === | === Paging with List Boxes and Grids === | ||
− | The < | + | The <code>listbox</code> and <code>grid</code> component supports <code>paging</code> intrinsically, therefore you don't need to specify a <code>paging</code> component explicitly as above, unless you want to have different visual layout or to control multiple list boxes and grids with one <code>paging</code> component. |
− | Please refer to the < | + | Please refer to the <code>Grids</code> section for more details. |
=== Paging with Tree === | === Paging with Tree === | ||
− | To use < | + | To use <code>paging</code> with <code>trees</code>, you have to set the <code>mold="paging"</code>. Related attributes <code>pageSize</code> and <code>pagingPosition</code> are optional. |
<source lang="xml" > | <source lang="xml" > |
Latest revision as of 10:43, 19 January 2022
This documentation is for an older version of ZK. For the latest one, please click here.
A paging
component is used to separate long content into multiple pages. For example, assume that you have 100 items and prefer to show 20 items at a time, you can use the paging
components as follows.
<zk>
<paging totalSize="100" pageSize="20"/>
</zk>
When a user clicks the paging component, the onPaging
event is sent along with an instance of PagingEvent to the paging
component. To decide which portion of your 100 items are visible, you can add a listener to the paging
component. Please note that the code below is pseudo code, you can find a real world example here.
<zk>
<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(result, ofs, ofs + event.getPaginal().
getPageSize() - 1);
//assume redraw(List result, int b, int e) will display
//from the b-th item to the e-th item
}
}
);
</zscript>
</zk>
Paging supports OS mold.
For those who prefer the legacy layout of ZK 3.0』s Button component, please use OS mold as follows:
<zk>
<paging mold="os" totalSize="100" pageSize="10"/>
</zk>
Paging with List Boxes and Grids
The listbox
and grid
component supports paging
intrinsically, therefore you don't need to specify a paging
component explicitly as above, unless you want to have different visual layout or to control multiple list boxes and grids with one paging
component.
Please refer to the Grids
section for more details.
Paging with Tree
To use paging
with trees
, you have to set the mold="paging"
. Related attributes pageSize
and pagingPosition
are optional.
<zk>
<tree mold="paging" pageSize="4" pagingPosition="both">
</tree>
</zk>