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	数字	当分页建立时设置记录的总数量	1
pageSize	数字	每一页显示的数量	10
pageNumber	数字	当分页建立时，显示的页数	1
pageList	数组	用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.	[10,20,30,50]
loading	布尔	定义数据是否正在加载	false
buttons	数组	定义自定义按钮，每个按钮包含两个属性： iconCls: 显示背景图像的CSS类 handler: 当一个按钮被点击时的处理函数	null
showPageList	布尔	定义是否显示页面列表	true
showRefresh	布尔	定义是否显示刷新按钮	true
beforePageText	字符串	在输入框组件前显示的标签	Page
afterPageText	字符串	在输入框组件后显示的标签	of {pages}
displayMsg	字符串	显示一个页面的信息。	Displaying {from} to {to} of {total} items

事件

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