How to create custom pagination in ZK

Question

I could not find any tutorial regarding custom pagination in zk. ZK provides it's default pagination and it's quite good but my customer needs different pagination style. So, how can I create custom pagination in ZK. Any help please ?

I have a listbox like this :

<listbox id=”bidLbx” mold=”paging”>
   <listitem>
     ...
   </listitem>
</listbox>

It displays ZK's default pagination like: 1 2 3 4 5 Next Last but with out option to select per page row number. So, I need my own Buttons and per page dropdown option.

Answer 1

You have to write the codes to control the pagination buttons as we require, i.e. First Previous 1 2 3 4 5 Next Last.

We just take reference of that id i.e. bidLbx and do coding. We need to get certain values and use those values to control the buttons.

This gives the current page no: bidLbx.getPaginal().getActivePage();

This gives the total number of rows: bidLbx.getPaginal().getTotalSize();

This sets the Page Size (i.e. no. of rows per page): bidLbx.getPaginal().setPageSize();

This gives the no. of pages: bidLbx.getPaginal().getPageCount();

and don't forget to disable the default paging.

<listbox id=”bidLbx” mold=”paging”>
    ...
    <zscript>
            <![CDATA[
                bidLbx.getPagingChild().setVisible(false);
                ]]>
    </zscript>
</listbox>

First button Example:

<button id="first" label="First" style="margin:10px; padding:5px;">
   <attribute name="onClick">
      <![CDATA[
          bidLbx.getPaginal().setActivePage(0);
      ]]>
   </attribute>
</button>

Dropdown perpage combobox:

<combobox id="pageSize" value="20" style="width:50px;" readonly="true">
    <comboitem label="5"></comboitem>
    <comboitem label="10"></comboitem>
        <attribute name="onCreate">
           <![CDATA[
             String ps = pageSize.getValue();
         int pSize = Integer.parseInt(ps);
         bidLbx.getPaginal().setPageSize(pSize);
      ]]>
        </attribute>
       <attribute name="onChange">
     <![CDATA[
           String ps = pageSize.getValue();
           int pSize = Integer.parseInt(ps);
       bidLbx.getPaginal().setPageSize(pSize);
     ]]>
      </attribute>
</combobox>

If you have still problem do comment.

Answer 2

1. You can use CSS to change the style of the Paging component or
2. just create your own paging component with zk components or pure html
   and listen to onClick Events, if you use zk components, or
   fire events to the server with javascript, if you use html,
   and handle the paging logic by your self.

For styling also refer to:
Customize Look and Feel - Part 1
Customize Look and Feel - Part 2