EasyUI Pagination 分页
通过 $.fn.pagination.defaults 重写默认的 defaults。
分页(pagination)允许用户通过翻页导航数据。它支持页面导航和页面长度选择的可配置选项。用户可以在分页的右侧添加自定义按钮来增强功能。
依赖
- linkbutton
用法
通过标记创建分页(pagination)。
<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"
data-options="total:2000,pageSize:10">
</div>
使用 javascript 创建分页(pagination)。
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({
total:2000,
pageSize:10
});
让我们通过面板(panel)和分页(pagination)插件创建 ajax 分页(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' 事件将被触发,该事件为内容面板(panel)调用 'refresh' 方法来加载带有一个新的 URL 参数的新页面内容。
属性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
total | number | 记录总数,应该在创建分页(pagination)时设置。 | 1 |
pageSize | number | 页面尺寸。(注:每页显示的最大记录数) | 10 |
pageNumber | number | 创建分页(pagination)时显示的页码。 | 1 |
pageList | array | 用户能改变页面尺寸。pageList 属性定义了能改成多大的尺寸。 代码实例:
|
[10,20,30,50] |
loading | boolean | 定义数据是否正在加载。 | false |
buttons | array,selector | 定义自定义按钮,可能的值: 1、数组,每个按钮包含两个属性: iconCls:CSS class,它将显示一个背景图片 handler:当按钮被点击时的处理函数 2、选择器,指示按钮。 按钮可通过标记声明:
按钮也可以使用 javascript 创建:
|
null |
layout | array | 分页布局定义。该属性自版本 1.3.5 起可用。 布局项目包括一个或多个下列值: 1、list:页面尺寸列表。 2、sep:页面按钮分割。 3、first:第一个按钮。 4、prev:前一个按钮。 5、next:后一个按钮。 6、last:最后一个按钮。 7、efresh:刷新按钮。 8、manual:允许输入域页码的手动页码输入框。 9、links:页码链接。 代码实例:
|
|
links | number | 链接数量,只有当 'links' 项包含在 'layout' 中时才是有效的。该属性自版本 1.3.5 起可用。 | 10 |
showPageList | boolean | 定义是否显示页面列表。 | true |
showRefresh | boolean | 定义是否显示刷新按钮。 | true |
beforePageText | string | 在 input 组件之前显示 label。 | Page |
afterPageText | string | 在 input 组件之后显示 label。 | of {pages} |
displayMsg | string | Display a page information. | 显示 {from} to {to} of {total} 页面信息。 |
事件
名称 | 参数 | 描述 |
---|---|---|
onSelectPage | pageNumber, pageSize | 当用户选择新的页面时触发。回调函数包含两个参数: pageNumber:新的页码 pageSize:新的页面尺寸 代码实例:
|
onBeforeRefresh | pageNumber, pageSize | 刷新按钮点击之前触发,返回 false 就取消刷新动作。 |
onRefresh | pageNumber, pageSize | 刷新之后触发。 |
onChangePageSize | pageSize | 当用户改变页面尺寸时触发。 |
方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
loading | none | 把分页(pagination)变成正在加载(loading)状态。 |
loaded | none | 把分页(pagination)变成加载完成(loaded)状态。 |
refresh | options | 刷新并显示分页信息。该方法自版本 1.3 起可用。 代码实例:
|
select | page | 选择一个新页面。页面索引从 1 开始。该方法从版本 1.3 起可用。 代码实例:
|
EasyUI Pagination 分页的更多相关文章
- [转载]EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- EasyUI - pagination 分页组件
总页数是手动填写,后续进行更改……………… 效果: html代码: <!--使用标签创建--> <%--<div id="pp" class="e ...
- EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- EasyUI Pagination 分页分页布局定义 显示按钮布局
//分页布局定义.该属性自版本 1.3.5 起可用.//布局项目包括一个或多个下列值://1.list:页面尺寸列表.//2.sep:页面按钮分割.//3.first:第一个按钮.//4.prev:前 ...
- easyUI pagination分页控件点击下一页后跳转到最后一页
easyui-pagination点击下一页直接跳转到最后一页的可能原因 今天做到聊天记录展示页面的时候发现一个bug:初次进入页面加载出第一页的数据,点击下一页的时候不是到第二页而是到最后一页. 如 ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- 第二百零九节,jQuery EasyUI,Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- jQuery easyUI Pagination控件自定义div分页(不用datagrid)
一般后台管理页面分页是通过datagrid加Pagination分页,但是如果前台页面没有用表格,例如博客的文章列表从上到下一般是到div分页, 这时如果还要用Pagination,则可以这样: 页面 ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
随机推荐
- [extjs] ExtJs4.2 Form 表单提交
基本代码: <script> Ext.onReady(function(){ Ext.create('Ext.form.Panel', { title: '登录', bodyPadding ...
- JBPM4.4_jBPM4.4的流程定义语言(设计流程)
1. jBPM4.4的流程定义语言(设计流程) 1.1. process(流程) 是.jpdl.xml的根元素,可以指定的属性有: 属性名 作用说明 name 流程定义的名称,用于显示. key 流程 ...
- Swift - UITableView的用法
因为倾向于纯代码编码,所以不太喜欢可视化编程,不过也略有研究,所以项目里面的所有界面效果,全部都是纯代码编写! 终于到了重中之重的tableview的学习了,自我学习ios编程以来,工作中用得最多的就 ...
- Android Tab切换
ViewPager+FragmentStatePagerAdapter 页面切换案例详解 http://blog.csdn.net/u010203181/article/details/4462963 ...
- 在properties.xml中定义变量,在application.xml中取值问题
如果为application.xml中的变量赋默认值,同时又在properties.xml中变量赋值,而加载后是取不到properties.xml中的值的问题. 解决这个问题需要加上黑体部分配置: & ...
- linux解压和压缩
1.压缩命令: 命令格式:tar -zcvf 压缩文件名.tar.gz 被压缩文件名 可先切换到当前目录下.压缩文件名和被压缩文件名都可加入路径. 2.解压缩命令: 命令格式:tar -z ...
- Android中Bitmap和Drawable详解
一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...
- Kotlin——初级篇(一):最详细的环境搭建
众所周知,Kotlin出来已经良久了.Kotlin有着众多优势,不管是用于Android开发中,还是Java开发,都能缩减很大的代码量,大大提高了工作效率.而小生本人也是才从忙碌的个工作中抽身出来,有 ...
- Python学习之k-近邻实例
海伦收集约会数据巳经有了一段时间,她把这些数据存放在文本文件datingTestSet.txt中,每个样本数据占据一行,总共有 1000 行.海伦的样本主要包含以下 3 种特征: 1. 每年获得的飞行 ...
- 【BZOJ3958】[WF2011]Mummy Madness 二分+扫描线+线段树
[BZOJ3958][WF2011]Mummy Madness Description 在2011年ACM-ICPC World Finals上的一次游览中,你碰到了一个埃及古墓. 不幸的是,你打开了 ...