Easyui Pagenation应用方法-白红宇

Easyui Pagenation应用方法

阅读量：4041 次

发布时间：2019-05-24

本文共 1638 字，大约阅读时间需要 5 分钟。

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

HTML代码

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

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

$('#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	当改变页面大小时触发

转载地址：http://cyadi.baihongyu.com/

你可能感兴趣的文章

带WiringPi库的交叉笔译如何处理二之软链接概念