现在的位置: 首页 > 综合 > 正文

easyUI Pagination

2013年06月07日 ⁄ 综合 ⁄ 共 2737字 ⁄ 字号 评论关闭

@author YHC

覆盖默认值$.fn.pagination.defaults.

pagination 允许用户在一个页面上导航数据,支持页面导航配置和页面大小选择,用户可以添加自定义按钮在pagination
的右边增加功能.


相关依赖

  • linkbutton

使用示例

从标记创建pagination.

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>  

使用javascript创建pagination 

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>  
$('#pp').pagination({  
    total:2000,  
    pageSize:10  
});  

让我们创建一个ajax的pagination和一个面板和一个pagination
插件,当用户选择一个新的页面的时候,panel将显示对应的特定页的内容.

<div id="content" class="easyui-panel" style="height:200px"  
        data-options="href:'show_content.php?page=1'">  
</div>  
<div class="easyui-pagination" style="border:1px solid #ccc;"  
        data-options="  
            total: 2000,  
            pageSize: 10,  
            onSelectPage: function(pageNumber, pageSize){  
                $('#content').panel('refresh', 'show_content.php?page='+pageNumber);  
            }">  
</div>  

这个panel顶部默认显示第一页的内容,当用户浏览这个页面时,'onSelectPage'事件将被触发,在那里我们调用了'refresh'方法,面板内容将去加载新的数据页内容和一个url参数.

属性

Name Type Description Default
total number 总记录数, 当pagination 被创建的时候应该已经设置. 1
pageSize number 页面大小. 10
pageNumber number pagination 创建后显示的页码. 1
pageList array 使用改变页面大小.  pageList属性定义能改变页面大小为多少.

示例代码:

$('#pp').pagination({
	pageList: [10,20,50,100]
});
[10,20,30,50]
loading boolean 定义是否数据加载. false
buttons array 自定义按钮, 所有按钮包含两个属性:
iconCls:CSS样式显示一个背景图片
handler: 当按钮被点击的时候的处理函数

自定义按钮可以从标记声明:

<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>

自定义按钮也可以使用javascript创建:

$('#pp').pagination({
	total: 114,
	buttons: [{
		iconCls:'icon-add',
		handler:function(){alert('add')}
	},'-',{
		iconCls:'icon-save',
		handler:function(){alert('save')}
	}]
});
null
showPageList boolean 定义是否显示pageList. true
showRefresh boolean 定义是否显示refresh按钮. true
beforePageText string 显示一个标签在input组件之前. Page
afterPageText string 显示一个标签在input组件之后. of {pages}
displayMsg string 显示一个页面信息. Displaying {from} to {to} of {total} items

事件

Name Parameters Description
onSelectPage pageNumber, pageSize 当用户选择一个新页面的时候触发. 回调函数包含两个参数:
pageNumber: 新的页码
pageSize: 新的页面大小

示例代码:

$('#pp').pagination({
	onSelectPage:function(pageNumber, pageSize){
		$(this).pagination('loading');
		alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
		$(this).pagination('loaded');
	}
});
onBeforeRefresh pageNumber, pageSize 当refresh按钮被点击刷新之前触发,返回false取消刷新动作.
onRefresh pageNumber, pageSize 刷新之后触发.
onChangePageSize pageSize 当用户改变页面大小时候触发.

方法

Name Parameter Description
options none 返回options 对象.
loading none 使pagination成为加载状态.
loaded none 使pagination成为已加载状态.
refresh options 刷新和显示一个页面信息.注意:这个方法从1.3版本可用.

示例代码:

$('#pp').pagination('refresh');	// 刷新页面工具栏显示信息
$('#pp').pagination('refresh',{	// 改变 options和刷新分页工具栏信息
	total: 114,
	pageNumber: 6
});
select page 选择一个新页面.页面起始下标是:1 .
注意:这个方法从1.3版本可用.

示例代码:

$('#pp').pagination('select');	// 刷新当前页面
$('#pp').pagination('select', 2);	// 选择第二个页面


以上如有错误信息,请指出,thanks!

抱歉!评论已关闭.