20、Pagination 分页组件 · Jquery EasyUI 学习笔记

> Pagination组件依赖于LinkButton(按钮)组件 # 加载方式 ## Class加载 ```  <div id="box" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"> </div> ``` ## JS调用加载 ``` <div id="content" class="easyui-pannel" style="width: 100%;height: 300px;border:1px solid #ccc;"></div> <div id="box" style="background:#efefef;border:1px solid #ccc;"> </div> <script> $(function () { $('#box').pagination({ // 总记录数 total : 5, // 每页显示条数 pageSize : 1, // 在分页控件创建的时候显示的页数 pageNumber : 1, // 用户可以改变页面大小 pageList : [1,2], // 定义数据是否正在载入 loading : false, // 自定义按钮 buttons : [{ iconCls : 'icon-add', handler : function () { alert('add'); }, },'-',{ iconCls : 'icon-save', handler : function () { alert('save'); }, }], //buttons : '#tt', // 分页控件布局定义 //layout : ['first','links','last'], // 定义是否显示页面导航列表 showPageList : true, // 定义是否显示刷新按钮 showRefresh : false, // 在输入组件之前显示一个 label 标签。 beforePageText : '第', // 在输入组件之后显示一个 label 标签。 afterPageText : '共{pages}条', // 显示页面信息 displayMsg : '显示{from}到{to},共{total}记录', // 用户选择一个新页面的时候触发 onSelectPage : function (pageNumber, pageSize) { $('#content').panel('refresh', 'user.php?page='+pageNumber); }, onBeforeRefresh : function (pageNumber, pageSize) { alert('刷新之前触发！'); }, onRefresh : function (pageNumber, pageSize) { alert('刷新之后触发！'); }, onChangePageSize : function (pageSize) { alert('改变每页显示条数触发！'); }, }); }); </script> ``` # 属性列表 | 属性名 | 值 | 说明 | | --- | --- | | total | number | 总记录数，在分页控件创建时初始的值。默认值1。| | pageSize | number | 每页显示条数。默认值10。| | pageNumber | number | 在分页控件创建的时候显示的页数。默认值为1。| | pageList | array | 用户可以改变页面大小。pageList 属性定义了页面导航展示的页码。默认值为[10,20,30,50]。| | loading | boolean | 定义数据是否正在载入。默认值为 false。| | buttons | array | 自定义按钮，可用值有：1.每个按钮都有2个属性：iconCls：显示背景图片的 CSS 类 IDhandler：当按钮被点击时调用的一个句柄函数。2.页面已存在元素的选择器对象（例如：buttons:'#btnDiv'）。默认值为 null| | layout | array | 分页控件布局定义。布局选项可以包含一个或多个值：1) list：页面显示条数列表。2) sep：页面按钮分割线。3) first：首页按钮。4) prev：上一页按钮。5) next：下一页按钮。6) last：尾页按钮。7) refresh：刷新按钮。8) manual：手工输入当前页的输入框。9) links：页面数链接。| | showPageList | boolean | 定义是否显示页面导航列表。| | showRefresh | boolean | 定义是否显示刷新按钮。| | beforePageText | string | 在输入组件之前显示一个 label 标签。| | afterPageText | string | 在输入组件之后显示一个 label 标签。| | displayMsg | string | 显示页面信息。| # 事件列表 | 事件名 | 传参 | 说明 | | --- | --- | | onSelectPage | pageNumber,pageSize | 用户选择一个新页面的时候触发。回调函数包含2个参数：pageNumber：新的页数。pageSize: 每页显示的条数。| | onBeforeRefresh | pageNumber,pageSize | 在点击刷新按钮刷新之前触发，返回false 可以取消刷新动作。| | onRefresh | pageNumber,pageSize | 刷新之后触发。| | onChangePageSize | pageSize | 在页面更改页面大小的时候触发。| # 方法列表 | 方法名 | 传参 | 说明 | | --- | --- | | options | none | 返回参数对象。| | loading| none | 提醒分页控件正在加载中。| | loaded | none | 提醒分页控件加载完成。| | refresh | options | 刷新并显示分页栏信息。| | select | page | 选择一个新页面，页面索引从1开始。| *** ``` //返回属性对象 console.log($('#box').pagination('options')); //分页控件加载和结束加载 onSelectPage : function (pageNumber, pageSize) { $('#box').pagination('loading'); $('#content').panel('refresh', 'user.php?page='+pageNumber+'&pagesize='+pageSize); setTimeout(function () { $('#box').pagination('loaded'); }, 1000); }, //刷新并显示分栏信息 $(document).click(function () { $('#box').pagination('refresh', { 方法名传参说明 options none 返回参数对象。 loading none 提醒分页控件正在加载中。 loaded none 提醒分页控件加载完成。 refresh options 刷新并显示分页栏信息。 select page 选择一个新页面，页面索引从1开始。 pageSize : 2, }); }); //选择一个新页面，索引从 1 开始 $(document).click(function () { $('#box').pagination('select', 2); }); //可以使用$.fn.pagination.defaults 重写默认值对象。 ```