通过 $.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 属性定义了能改成多大的尺寸。
代码实例:
  1. $('#pp').pagination({
  2. pageList: [10,20,50,100]
  3. });
[10,20,30,50]
loading boolean 定义数据是否正在加载。 false
buttons array,selector 定义自定义按钮,可能的值:
1、数组,每个按钮包含两个属性:
iconCls:CSS class,它将显示一个背景图片
handler:当按钮被点击时的处理函数
2、选择器,指示按钮。

按钮可通过标记声明:

  1. <div class="easyui-pagination" style="border:1px solid #ccc" data-options="
  2. total: 114,
  3. buttons: [{
  4. iconCls:'icon-add',
  5. handler:function(){alert('add')}
  6. },'-',{
  7. iconCls:'icon-save',
  8. handler:function(){alert('save')}
  9. }]">
  10. </div>

按钮也可以使用 javascript 创建:

  1. $('#pp').pagination({
  2. total: 114,
  3. buttons: [{
  4. iconCls:'icon-add',
  5. handler:function(){alert('add')}
  6. },'-',{
  7. iconCls:'icon-save',
  8. handler:function(){alert('save')}
  9. }]
  10. });
null
layout array 分页布局定义。该属性自版本 1.3.5 起可用。
布局项目包括一个或多个下列值:
1、list:页面尺寸列表。
2、sep:页面按钮分割。
3、first:第一个按钮。
4、prev:前一个按钮。
5、next:后一个按钮。
6、last:最后一个按钮。
7、efresh:刷新按钮。
8、manual:允许输入域页码的手动页码输入框。
9、links:页码链接。

代码实例:

  1. $('#pp').pagination({
  2. layout:['first','links','last']
  3. });
 
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:新的页面尺寸

代码实例:

  1. $('#pp').pagination({
  2. onSelectPage:function(pageNumber, pageSize){
  3. $(this).pagination('loading');
  4. alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
  5. $(this).pagination('loaded');
  6. }
  7. });
onBeforeRefresh pageNumber, pageSize 刷新按钮点击之前触发,返回 false 就取消刷新动作。
onRefresh pageNumber, pageSize 刷新之后触发。
onChangePageSize pageSize 当用户改变页面尺寸时触发。

方法

名称 参数 描述
options none 返回选项(options)对象。
loading none 把分页(pagination)变成正在加载(loading)状态。
loaded none 把分页(pagination)变成加载完成(loaded)状态。
refresh options 刷新并显示分页信息。该方法自版本 1.3 起可用。
代码实例:
  1. $('#pp').pagination('refresh'); // 刷新分页栏信息
  2. $('#pp').pagination('refresh',{ // 改变选项,并刷新分页栏信息
  3. total: 114,
  4. pageNumber: 6
  5. });
select page 选择一个新页面。页面索引从 1 开始。该方法从版本 1.3 起可用。
代码实例:
  1. $('#pp').pagination('select'); // 刷新当前页面
  2. $('#pp').pagination('select', 2); // 选择第二页

EasyUI Pagination 分页的更多相关文章

  1. [转载]EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  2. EasyUI - pagination 分页组件

    总页数是手动填写,后续进行更改……………… 效果: html代码: <!--使用标签创建--> <%--<div id="pp" class="e ...

  3. EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  4. EasyUI Pagination 分页分页布局定义 显示按钮布局

    //分页布局定义.该属性自版本 1.3.5 起可用.//布局项目包括一个或多个下列值://1.list:页面尺寸列表.//2.sep:页面按钮分割.//3.first:第一个按钮.//4.prev:前 ...

  5. easyUI pagination分页控件点击下一页后跳转到最后一页

    easyui-pagination点击下一页直接跳转到最后一页的可能原因 今天做到聊天记录展示页面的时候发现一个bug:初次进入页面加载出第一页的数据,点击下一页的时候不是到第二页而是到最后一页. 如 ...

  6. EasyUI基础入门之Pagination(分页)

    前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...

  7. 第二百零九节,jQuery EasyUI,Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  8. jQuery easyUI Pagination控件自定义div分页(不用datagrid)

    一般后台管理页面分页是通过datagrid加Pagination分页,但是如果前台页面没有用表格,例如博客的文章列表从上到下一般是到div分页, 这时如果还要用Pagination,则可以这样: 页面 ...

  9. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

随机推荐

  1. Phpcms v9专题分类增加模板设置的方法

    Phpcms v9专题设置里面,默认专题子分类是无模板设置的,本文教你通过官方论坛给出的教程实现专题分类增加模板设置.先来看看默认专题子分类设置界面: 修改后的的专题子分类设置界面多了模板设置: 修改 ...

  2. Tomcat之JSP运行原理之小试牛刀

    最近空闲看了下JSP/Servlet,以前只知道用JSP,但是对其运行原理知之甚少,今在此做些笔记,以备查阅. 首先简要描述下其运行过程,然后结合Tomcat源码作简要分析. JSP运行过程: 第一步 ...

  3. Java精选笔记_面向对象(慨念、类和对象)

    面向对象概念 在程序中使用对象来映射现实中的事物,使用对象的关系来描述事物之间的联系,这种思想就是面向对象. 相对于面向过程而言.是一种思想,强调的是功能的对象. 面向对象的本质:以类的方式组织代码, ...

  4. Extjs3.4--TabpanelDemo

    Ext.onReady(function () { var tab = new Ext.TabPanel({ renderTo: Ext.getBody(), height: 500 }) tab.a ...

  5. Android Timer的应用示例

    package com.hyzhou.timerdemo1; import java.util.Timer; import java.util.TimerTask; import android.os ...

  6. ArcGIS Javascript 图层事件绑定

    1.使用Dojo---Connect Style Event dojo.connect(XXXGraphicsLayer, "onClick", function(evt) { / ...

  7. 08python之列表的常用方法

    列表list是python常用的数据类型,需要掌握以下常用方法: name_list = ['alex','tenglan','65brother'] 这个变量和之前的变量只存一个数字或字符串,这个列 ...

  8. C#中的抽象类与重写

    今天的我们学习了好多,最初上午学习了文件流的方法,老师告诉我们是选修,可能以后不怎么用吧,但是还是想学下,似乎用个小程序读写文件很快地节奏,所以有点小兴趣学习,明天我再看看啦!今天之后学习了多态,继承 ...

  9. 硝烟中的Scrum和XP-我们如何实施Scrum 12)发布计划 13)组合XP

    12 怎样制定发布计划, 处理固定价格的合同 一次只计划一个sprint的事情会显得提前量不足, 提前做计划是个好习惯; 尤其是签了固定价格的合同之后, 不得不预先计划好, 防止无法按期交付的危险情况 ...

  10. Android 菜单动态变化【添加或去除】

    <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android: ...