EasyUI中分页的简单使用

╰+哭是因爲堅強的太久メ 2023-10-18 19:54 68阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>total</td> 
   <td>number</td> 
   <td>记录总数，应该在创建分页（pagination）时设置。</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>pageSize</td> 
   <td>number</td> 
   <td>页面尺寸。（注：每页显示的最大记录数）</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>pageNumber</td> 
   <td>number</td> 
   <td>创建分页（pagination）时显示的页码。</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>pageList</td> 
   <td>array</td> 
   <td>用户能改变页面尺寸。pageList 属性定义了能改成多大的尺寸。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#pp').pagination({ </li> 
     <li>pageList: [10,20,50,100]</li> 
     <li>});</li> 
    </ol></td> 
   <td>[10,20,30,50]</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>boolean</td> 
   <td>定义数据是否正在加载。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>buttons</td> 
   <td>array,selector</td> 
   <td>定义自定义按钮，可能的值：<br> 1、数组，每个按钮包含两个属性：<br> iconCls：CSS class，它将显示一个背景图片<br> handler：当按钮被点击时的处理函数<br> 2、选择器，指示按钮。<br><br> 按钮可通过标记声明： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-pagination" style="border:1px solid #ccc" data-options="</li> 
     <li>total: 114,</li> 
     <li>buttons: [{ </li> 
     <li>iconCls:'icon-add',</li> 
     <li>handler:function(){alert('add')}</li> 
     <li>},'-',{ </li> 
     <li>iconCls:'icon-save',</li> 
     <li>handler:function(){alert('save')}</li> 
     <li>}]"&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol> 按钮也可以使用 javascript 创建： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#pp').pagination({ </li> 
     <li>total: 114,</li> 
     <li>buttons: [{ </li> 
     <li>iconCls:'icon-add',</li> 
     <li>handler:function(){alert('add')}</li> 
     <li>},'-',{ </li> 
     <li>iconCls:'icon-save',</li> 
     <li>handler:function(){alert('save')}</li> 
     <li>}]</li> 
     <li>});</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>layout</td> 
   <td>array</td> 
   <td>分页布局定义。该属性自版本 1.3.5 起可用。<br> 布局项目包括一个或多个下列值：<br> 1、list：页面尺寸列表。<br> 2、sep：页面按钮分割。<br> 3、first：第一个按钮。<br> 4、prev：前一个按钮。<br> 5、next：后一个按钮。<br> 6、last：最后一个按钮。<br> 7、efresh：刷新按钮。<br> 8、manual：允许输入域页码的手动页码输入框。<br> 9、links：页码链接。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#pp').pagination({ </li> 
     <li>layout:['first','links','last']</li> 
     <li>});</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>links</td> 
   <td>number</td> 
   <td>链接数量，只有当 'links' 项包含在 'layout' 中时才是有效的。该属性自版本 1.3.5 起可用。</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>showPageList</td> 
   <td>boolean</td> 
   <td>定义是否显示页面列表。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>showRefresh</td> 
   <td>boolean</td> 
   <td>定义是否显示刷新按钮。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>beforePageText</td> 
   <td>string</td> 
   <td>在 input 组件之前显示 label。</td> 
   <td>Page</td> 
  </tr> 
  <tr> 
   <td>afterPageText</td> 
   <td>string</td> 
   <td>在 input 组件之后显示 label。</td> 
   <td>of {pages}</td> 
  </tr> 
  <tr> 
   <td>displayMsg</td> 
   <td>string</td> 
   <td>Display a page information.</td> 
   <td>显示 {from} to {to} of {total} 页面信息。</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onSelectPage</td> 
   <td>pageNumber, pageSize</td> 
   <td>当用户选择新的页面时触发。回调函数包含两个参数：<br> pageNumber：新的页码<br> pageSize：新的页面尺寸<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#pp').pagination({ </li> 
     <li>onSelectPage:function(pageNumber, pageSize){ </li> 
     <li>$(this).pagination('loading');</li> 
     <li>alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);</li> 
     <li>$(this).pagination('loaded');</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>onBeforeRefresh</td> 
   <td>pageNumber, pageSize</td> 
   <td>刷新按钮点击之前触发，返回 false 就取消刷新动作。</td> 
  </tr> 
  <tr> 
   <td>onRefresh</td> 
   <td>pageNumber, pageSize</td> 
   <td>刷新之后触发。</td> 
  </tr> 
  <tr> 
   <td>onChangePageSize</td> 
   <td>pageSize</td> 
   <td>当用户改变页面尺寸时触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>none</td> 
   <td>把分页（pagination）变成正在加载（loading）状态。</td> 
  </tr> 
  <tr> 
   <td>loaded</td> 
   <td>none</td> 
   <td>把分页（pagination）变成加载完成（loaded）状态。</td> 
  </tr> 
  <tr> 
   <td>refresh</td> 
   <td>options</td> 
   <td>刷新并显示分页信息。该方法自版本 1.3 起可用。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#pp').pagination('refresh'); // 刷新分页栏信息</li> 
     <li>$('#pp').pagination('refresh',{ // 改变选项，并刷新分页栏信息</li> 
     <li>total: 114,</li> 
     <li>pageNumber: 6</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>page</td> 
   <td>选择一个新页面。页面索引从 1 开始。该方法从版本 1.3 起可用。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#pp').pagination('select'); // 刷新当前页面</li> 
     <li>$('#pp').pagination('select', 2); // 选择第二页</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
        <div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"
             data-options="total:2000,pageSize:10,pageList: [10,20,50,100],
                buttons: [{
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },'-',{
                    iconCls:'icon-save',
                    handler:function(){alert('save')}
      }]">
        </div>
    </body>
    </html>

### 效果 ###

![Image 1][]![2019061721223333.gif][]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190617212216226.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[2019061721223333.gif]: https://img-blog.csdnimg.cn/2019061721223333.gif