How to create custom pagination in ZK

时光总嘲笑我的痴心妄想 提交于 2019-12-23 04:59:14

问题


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.


回答1:


  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




回答2:


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.



来源:https://stackoverflow.com/questions/13861187/how-to-create-custom-pagination-in-zk

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!