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.