pagination - Documentation - jQuery EasyUI

jQuery EasyUI

previous page next page

分页 -  Pagination

使用$.fn.pagination.defaults重载默认值。

这个分页允许用户导航数据页面。它支持可配置选项页面导航和页面长度的选择。用户可以添加自定义按钮在正确的分页,增强其功能。 

依赖组件（Dependencies）

使用方法（Usage Example）

创建分页标记。

使用javascript创建分页。

让我们创建ajax分页与面板和分页的插件。当用户选择一个新页面,面板将显示相应的内容的页面指定。 

上面的面板显示第一个页面内容默认情况下。当用户浏览这个页面,“onSelectPage”事件将被触发,在我们所谓的“刷新”方法内容面板加载新页内容与一个新的URL参数。

属性（Properties）

名称 类型 描述 默认值
total number 总记录数，当创建分页时必须设置。 1
pageSize number 每页显示的记录数。 10
pageNumber number 当分页创建完毕时显示当前页码。 1
pageList array 用户能够改变每页显示的记录数。

示例:

$('#pp').pagination({
	pageList: [10,20,50,100]
});
[10,20,30,50]
loading boolean 定义数据是否正在载入。 false
buttons array 自定义按钮，每个按钮包含2个属性:
iconCls： 显示背景图片的CSS类
handler： 当按钮被点击时调用的一个句柄函数

The customize buttons can be declared from markup:

<div class="easyui-pagination" style="border:1px solid #ccc" data-options="
		total: 114,
		buttons: [{
			iconCls:'icon-add',
			handler:function(){alert('add')}
		},'-',{
			iconCls:'icon-save',
			handler:function(){alert('save')}
		}]">
</div>

The customize buttons can also be created using javascript:

$('#pp').pagination({
	total: 114,
	buttons: [{
		iconCls:'icon-add',
		handler:function(){alert('add')}
	},'-',{
		iconCls:'icon-save',
		handler:function(){alert('save')}
	}]
});
null
showPageList boolean 定义是否显示可选择的每页记录数。 true
showRefresh boolean 定义是否显示刷新按钮。 true
beforePageText string 在输入框之前显示的符号。 Page
afterPageText string 在输入框之后显示的符号。 of {pages}
displayMsg string 在插件右上方显示分页信息。 Displaying {from} to {to} of {total} items

事件（Events）

名称 属性 描述
onSelectPage pageNumber, pageSize 当用户进行翻页时触发，回调函数包含2个参数:
pageNumber： 下一页的页码
pageSize： 下一页的显示记录数

示例:

$('#pp').pagination({
	onSelectPage:function(pageNumber, pageSize){
		$(this).pagination('loading');
		alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
		$(this).pagination('loaded');
	}
});
onBeforeRefresh pageNumber, pageSize 刷新之前触发, 返回false将取消刷新。
onRefresh pageNumber, pageSize 刷新之后触发。
onChangePageSize pageSize 当用户修改每页显示记录数时触发。

方法（Methods）

名称 属性 描述
options none 返回分页属性对象。
loading none 提醒分页插件正在载入。
loaded none 提醒分页插件已经载入。
refresh options
刷新并显示信息。这个方法版本1.3可用。。

示例:
$('#pp').pagination('refresh');	// 刷新页面右栏的信息
$('#pp').pagination('refresh',{	// 改变选项并刷新页面右栏的信息
	total: 114,
	pageNumber: 6
});
select page 选择一个新页面。页面索引从1开始。这个方法版本1.3可用。

示例:

$('#pp').pagination('select');	// refresh the current page
$('#pp').pagination('select', 2);	// select the second page
previous page start next page