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