第二百零九节，jQuery EasyUI，Pagination(分页)组件
jQuery EasyUI，Pagination(分页)组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Pagination(分页)组件的使用方法，这个组件依赖于 LinkButton(按钮)组件。
一．加载方式
class 加载方式
<div id="box" class="easyui-pagination"
data-options="total:2000,pageSize:10"
style="background:#efefef;border:1px solid #ccc;">
</div>
JS 加载调用
pagination()将元素执行分页方法
$('#box').pagination({
total : 2000,
pageSize : 10,
});
实现一个 panel (面板)结合 pagination(分页)分页例子，需要一个 PHP 分页文件
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1'"></div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
data-options="
total : 5,
pageSize : 1,
pageNumber : 1,
pageList : [1],
onSelectPage : function (pageNumber, pageSize) {
$('#content').panel('refresh', 'user.php?page='+pageNumber);
}
"></div>
二．属性列表
total number 总记录数，在分页控件创建时初始的值。默认值1。也就是数据库总条数
$(function () {
$('#box').pagination({
total:50, //总记录数,也就是数据库总条数
pageSize:5 //每页显示条数,就是每页显示多少条
});
});
pageSize number 每页显示条数。默认值10。就是每页显示多少条
$(function () {
$('#box').pagination({
total:50, //总记录数,也就是数据库总条数
pageSize:5 //每页显示条数,就是每页显示多少条
});
});
pageNumber number 在分页控件创建的时候显示的页数。默认值为1。
$(function () {
$('#box').pagination({
total:50, //总记录数,也就是数据库总条数
pageSize:5, //每页显示条数,就是每页显示多少条
pageNumber:1 //创建的时候显示的页数。默认值为1。
});
});
pageList array用户可以改变页面大小。pageList 属性定义了页 面 导 航 展 示 的 页 码 。 默 认 值 为[10,20,30,50]。每页显示多少条的选择
$(function () {
$('#box').pagination({
total:50, //总记录数,也就是数据库总条数
pageSize:10, //每页显示条数,就是每页显示多少条
pageNumber:1, //创建的时候显示的页数。默认值为1。
pageList:[10,20] //每页显示多少条的选择
});
});
loading boolean 定义数据是否正在载入。默认值为 false。，有点异常
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
loading:false, //义数据是否正在载入。默认值为 false。
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
}
});
});
buttons array自定义按钮，可用值有：，新增按钮
1.每个按钮都有2个属性：
iconCls：显示背景图片的 CSS 类 ID
handler：当按钮被点击时调用的一个句柄函数。
2.页面已存在元素的选择器对象（例如：
buttons:'#btnDiv'）。默认值为 null。
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
buttons:[{
iconCls : 'icon-add',
handler:function () {
alert('点击时操作')
}
},{
iconCls : 'icon-edit',
handler:function () {
alert('点击时操作')
}
}],
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
}
});
});
layout array分页控件布局定义。布局选项可以包含一个或多个值：数组方式布局
1) list：页面显示条数列表。
2) sep：页面按钮分割线。
3) first：首页按钮。
4) prev：上一页按钮。
5) next：下一页按钮。
6) last：尾页按钮。
7) refresh：刷新按钮。
8) manual：手工输入当前页的输入框。
9) links：页面数链接。
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
layout:['list','sep','first','prev','links','next','last','manual']
});
});
showPageList boolean 定义是否显示页面导航列表。是否显示可选每页显示多少条
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
showPageList:false //是否显示可选每页显示多少条
});
});
showRefresh boolean 定义是否显示刷新按钮。
$(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
showRefresh:false //定义是否显示刷新按钮。
});
});
beforePageText string 在输入组件之前显示一个 label 标签。输入页前的文字
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
beforePageText:'目前第', //输入页前的文字
afterPageText:'一共{pages}页' //输入页后的文字
});
});
afterPageText string 在输入组件之后显示一个 label 标签。输入页后的文字
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
beforePageText:'目前第', //输入页前的文字
afterPageText:'一共{pages}页' //输入页后的文字
});
});
displayMsg string 设置显示页面信息。
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
beforePageText:'目前第', //输入页前的文字
afterPageText:'一共{pages}页', //输入页后的文字
displayMsg:'显示{from}到{to}个会员,共{total}会员'
});
});
三．事件列表
onSelectPage pageNumber,pageSize用户选择一个新页面的时候触发。回调函数包含2个参数：
pageNumber：新的页数。
pageSize: 每页显示的条数。
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
}
});
});
onBeforeRefresh pageNumber,pageSize在点击刷新按钮刷新之前触发，返回false 可以取消刷新动作。
pageNumber：新的页数。
pageSize: 每页显示的条数。
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
onBeforeRefresh:function (pageNumber,pageSize) {
alert('在点击刷新按钮刷新之前触发');
}
});
});
onRefresh pageNumber,pageSize 刷新之后触发。
pageNumber：新的页数。
pageSize: 每页显示的条数。
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
onRefresh:function (pageNumber,pageSize) {
alert('刷新之后触发');
}
});
});
onChangePageSize pageSize '改变每页显示条数触发。
pageSize: 每页显示的条数。
$(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
onChangePageSize:function (pageSize) {
alert('改变每页显示条数触发');
}
});
});
三．方法列表
options none 返回参数对象。
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //用户选择一个新页面的时候触发
// pageNumber：新的页数。
// pageSize: 每页显示的条数。
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
},
});
alert($('#box').pagination('options')); //返回参数对象
});
loading none 提醒分页控件正在加载中。在加载分页时刷新按钮旋转
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //点击分页时触发
$('#box').pagination('loading'); //在加载分页时刷新按钮旋转
$('#content').panel('refresh','user.php?page=' + pageNumber + '&pagesize=' + pageSize); //重新加载数据
setTimeout(function () {
$('#box').pagination('loaded'); //分页加载完成时刷新按钮停止
}, 1000);
}
});
});
loaded none 提醒分页控件加载完成。分页加载完成时刷新按钮停止
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //点击分页时触发
$('#box').pagination('loading'); //在加载分页时刷新按钮旋转
$('#content').panel('refresh','user.php?page=' + pageNumber + '&pagesize=' + pageSize); //重新加载数据
setTimeout(function () {
$('#box').pagination('loaded'); //分页加载完成时刷新按钮停止
}, 1000);
}
});
});
refresh options 刷新并显示分页栏信息。值为一个对象里面写要改变的信息属性
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //点击分页时触发
$('#box').pagination('loading'); //在加载分页时刷新按钮旋转
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize); //重新加载数据
setTimeout(function () {
$('#box').pagination('loaded'); //分页加载完成时刷新按钮停止
}, 1000);
}
});
$(document).click(function () {
$('#box').pagination('refresh', {
pageSize: 20,
});
});
});
select page 选择一个新页面，页面索引从1开始。值为要改变的分页索引
/**
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'user.php?page=1&pagesize=1'"></div> //传递数据，第一页，第一条
<div id="box">
</div>
**/ $(function () {
$('#box').pagination({
total: 50, //总记录数,也就是数据库总条数
pageSize: 10, //每页显示条数,就是每页显示多少条
pageNumber: 1, //创建的时候显示的页数。默认值为1。
pageList: [10, 20], //每页显示多少条的选择
onSelectPage: function (pageNumber, pageSize) { //点击分页时触发
$('#box').pagination('loading'); //在加载分页时刷新按钮旋转
$('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize); //重新加载数据
setTimeout(function () {
$('#box').pagination('loaded'); //分页加载完成时刷新按钮停止
}, 1000);
}
});
$(document).click(function () {
$('#box').pagination('select', 2);
});
});
PS：我们可以使用$.fn.pagination.defaults 重写默认值对象。见前面章节
第二百零九节，jQuery EasyUI，Pagination(分页)组件的更多相关文章
- 第二百零八节，jQuery EasyUI，SplitButton(分割按钮菜单)组件
jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...
- 第二百零三节，jQuery EasyUI，Window(窗口)组件
jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...
- 第三百零九节，Django框架,models.py模块，数据库操作——F和Q()运算符：|或者、&并且——queryset对象序列化
第三百零九节,Django框架,models.py模块,数据库操作——F()和Q()运算符:|或者.&并且 F()可以将数据库里的数字类型的数据,转换为可以数字类型 首先要导入 from dj ...
- 第二百零七节，jQuery EasyUI，MenuButton(菜单按钮)组件
jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法 ...
- 第二百零六节，jQuery EasyUI，Menu(菜单)组件
jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法, ...
- 第二百零五节，jQuery EasyUI，Messager(消息窗口)组件
jQuery EasyUI,Messager(消息窗口)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 Messager(消息窗口)组件的使用方法,这个组 ...
- 第二百零四节，jQuery EasyUI，Dialog(对话框)组件
jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖 ...
- 第二百零二节，jQuery EasyUI，Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- 第二百零一节，jQuery EasyUI，Accordion(分类)组件
jQuery EasyUI,Accordion(分类)组件 学习要点: 1.加载方式 2.容器属性 3.事件列表 4.方法列表 5.面板属性 本节课重点了解 EasyUI 中 Accordion(选项 ...
随机推荐
- Centos 7 搭建蓝鲸3.1.5社区版
第一次搭建蓝鲸平台,参考了蓝鲸社区的官方搭建文档. 友情链接:蓝鲸智云社区版V3.1用户手册 搭建时遇到了不少的坑,这里做一个详细的安装梳理 主机硬件要求 官方的推荐如下: 我在公司测试环境搭建时机器 ...
- MySQL数据库如何与EXCEL的XLS格式相互转换
1 将SQL导出为EXCEL方法,有如下数据库(my_impa),里面有两张表 2 如果是EXCEL格式,一定要勾选"将字段名称放在首行",否则待会儿导入的时候就需要你手工新建字段 ...
- [Unity3D]Unity3D游戏开发之Lua与游戏的不解之缘终结篇：UniLua热更新全然解读
---------------------------------------------------------------------------------------------------- ...
- NoSQL数据库介绍（2）
2 NoSQL潮流 在这一章中,将一起讨论NoSQL潮流的动机和主要驱动力.以及NoSQL主张的批评和反馈.本章将通过不同的尝试得出结论来分类和描写叙述NoSQL数据库.当中一个分类法将在随 ...
- 算法笔记_097:蓝桥杯练习 算法提高 P1001（Java）
目录 1 问题描述 2 解决方案 1 问题描述 当两个比较大的整数相乘时,可能会出现数据溢出的情形.为避免溢出,可以采用字符串的方法来实现两个大数之间的乘法.具体来说,首先以字符串的形式输入两个整 ...
- 算法笔记_076:蓝桥杯练习 结点选择（Java）
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 有一棵 n 个节点的树,树上每个节点都有一个正整数权值.如果一个点被选择了,那么在树上和它相邻的点都不能被选择.求选出的点的权值和最大是多 ...
- 【Datastage】在win10安装Datastge 8.7
在win10安装提示Datastage提示如下错误: 强制安装: setup.exe -force 进入浏览器安装界面后 忽略"失败"即可成功安装.
- Unity UI代码自动生成
最近在做新项目跟同事讨论UI制作方案, 这里就说下根据节点来生成UI代码, 这个工具可以根据预设生成一个分布类.目前组件还不是很完善, 自己使用需要修改部分代码 组件功能如下: 1. 自动设置引用 ...
- Linux 压缩文件的命令行总结
Linux压缩文件的读取 · *.Z compress 程序压缩的档案: · *.bz2 bzip2 程序压缩的档案: · *.gz gzip 程序压缩 ...
- java基础讲解08-----类和对象
1.什么是面向对象? 面向对象设计的实质 就是对现实世界的对象进行建模操作. 现实的生活中,随处可见的一种事物就是对象,对象是事物存在的实体,通常我们将会对对象划分为两个部分,静态部分和动态部分.比如 ...