Easyui Pagenation应用方法

在web开发中，经常会遇到分页的需求，如果靠我们手写代码，可能代码又多 ，样式又不好看，下面介绍一下jQuery easyUI 分页功能，非常的方便简单，下面看一下效果图：

HTML代码

1. <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里插入下面的代码即可：

1. $('#pp').pagination(options);

编写jQuery代码创建数据表格组件:

$('#tt').datagrid({
    title:'Load Data',
    iconCls:'icon-save',
    width:600,
    height:250,
    url:'/demo3/data/getItems',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]],
    pagination:true
});

我们定义了数据表格列并设置’pagination’属性为true，这样就会在数据表格底部生成分页栏。分页组件发送两个参数到服务器端:

• page: 页码，从1开始
• rows: 每页条数

 

下面来介绍Pagination的具体用法，首先来看属性：

属性名类型描述默认值total数字当分页建立时设置记录的总数量1pageSize数字每一页显示的数量10pageNumber数字当分页建立时，显示的页数1pageList数组用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.[10,20,30,50]loading布尔定义数据是否正在加载falsebuttons数组定义自定义按钮，每个按钮包含两个属性：
iconCls: 显示背景图像的CSS类
handler: 当一个按钮被点击时的处理函数nullshowPageList布尔定义是否显示页面列表trueshowRefresh布尔定义是否显示刷新按钮truebeforePageText字符串在输入框组件前显示的标签PageafterPageText字符串在输入框组件后显示的标签of {pages}displayMsg字符串显示一个页面的信息。Displaying {from} to {to} of {total} items

事件

事件名参数描述onSelectPagepageNumber, pageSize当用户选择一个新页时触发，回调函数包含两个参数：
pageNumber: 新页面的页数
pageSize: 新页面的大小onBeforeRefreshpageNumber, pageSize刷新按钮被点击之前触发，如果返回false则取消刷新操作onRefreshpageNumber, pageSize刷新以后触发onChangePageSizepageSize

当改变页面大小时触发