easyui api中文文档:Pagination

 2397浏览

分页(分页)

用$.fn.pagination.defaults重写defaults 这个分页控件允许用户通过页码的方式导航数据,它支持可配置的选项页面导航和页面长度,使用者可以在右侧添加自定义按钮来增加其功能。

依赖项(Dependencies)

linkbutton

使用示例(Usage Example)

通过标记的方式创建分页
通过javascript的方式创建分页
$('#pp').pagination({
total:2000,
pageSize:10
},2);
通过panel和pagination插件创建ajax分页。当用户选择一个新的页面,面板将会正确的显示指定的页面。
面板默认情况下是显示第一页的内容,单用户选择浏览某个页面,‘onSelectPage’事件将被触发。‘refresh’方法将在面板上通过新的url参数加载新的页面。

属性(Properties)

Name Type Description Default
total number 所有的记录数,当分页控件被创建的时候就应该被设置。 1
pageSize number 页数 10
pageNumber number 当分页控件被创建的时候显示页码 1
pageList array 用户可以改变每页显示的数据条数,pagelist属性可以定义显示哪些条数,代码示例: $('#pp').pagination({ pageList: [10,20,50,100] },2); [10,20,30,50]
loading boolean 定义加载数据 false
buttons array,selector 定义自定义按钮,可能的值 1、一个数组,每个按钮包含2个属性:iconCls:能显示背景图片的类名。Handler:当按钮被点击时候的处理的程序 2、一个表面按钮的选择器 按钮可以通过标记的方式定义
按钮也可以通过javascript创建 $('#pp').pagination({ total: 114, buttons: [{ iconCls:'icon-add', handler:function(){alert('add')} },'-',{ iconCls:'icon-save', handler:function(){alert('save')} }] },2);
null
layout array 分页控件的布局设置,此属性从1.3.5开始的 布局选项包括1个或多个以下的值: List:每页显示条数列表 Sep:页数按钮的分隔符 First:第一个按钮 Prev:前一页按钮 Next:下一页按钮 Last:最后一页按钮 Refresh:刷新按钮 Manual: Links: $('#pp').pagination({ layout:['first','links','last'] },2);
links number 链接数量,只有当‘layout’包含‘links’的时候才可用,这时1.3.5新增的属性 10
showPageList boolean 是否显示每页显示条数下拉框 true
showRefresh boolean 是否显示刷洗按钮 true
beforePageText string 在输入组件钱显示文本 Page
afterPageText string 在输入组建后显示文本 of {pages}
displayMsg string 显示分页信息 Displaying {from} to {to} of {total} items

事件(Events)

Name Parameters Description
onSelectPage pageNumber, pageSize 单用户选择一个新页数的时候触发,回调函数包括2个参数 Pagenumber:新的条数数量 Pagesize:新的页码 代码示例: $('#pp').pagination({ onSelectPage:function(pageNumber, pageSize){ $(this).pagination('loading',2); alert('pageNumber:'+pageNumber+',pageSize:'+pageSize,2); $(this).pagination('loaded',2); } },2);
onBeforeRefresh pageNumber, pageSize 在刷新按钮被点击前触发,返回false取消刷新时间
onRefresh pageNumber, pageSize 在刷新之后被触发
onChangePageSize pageSize 当用户改变每页显示条数的时候被触发。

方法(Methods)

Name Parameter Description
options none Return the options object. 返回options对象
loading none Make the pagination to become loading status. 标记分页控件为loading状态
loaded none Make the pagination to become loaded status. 表姐分页控件为loaded状态
refresh options Refresh and display pager information. This method is available since version 1.3. Code example: 刷新显示分页信息,是1.3以后新增的方法 代码示例: $('#pp').pagination('refresh',2);?????????????? // refresh the pager bar information $('#pp').pagination('refresh',{????????????? // change options and refresh pager bar information ?????????????? total: 114, ?????????????? pageNumber: 6 },2);
select page Select a new page. The page index start with 1. This method is available since version 1.3. Code example: 选择一个新的页码,页数是从1开始的,此方法是1.3新增的 代码示例: $('#pp').pagination('select',2); // refresh the current page $('#pp').pagination('select', 2,2);???????????? // select the second page
流行热度:超过2397次围观
生产日期:2014-05-07 22:14:54
上次围观:2016-09-18 07:46:59
转载时必须以链接形式注明原始出处及本声明。