首页 > 代码库 > EasyUI基础入门之Pagination(分页)
EasyUI基础入门之Pagination(分页)
前言
对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了。对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了。恰巧EasyUI就提供了分页组件Pagination
pagination覆盖默认$.fn.pagination.defaults.Pagination分页同意用户通过分页的方式来浏览数据，它支持可配置的选项,页面导航和页面长度的选择,并且用户能够加入?分页的右边定制button来增强分页功能。
只是pagination是依赖于linkbutton的,因此这里有必要了解下linkbutton。
linkbutton
使用$.fn.linkbutton.defaults重载默认值。
链接button用户创建超链接button。它是表示正常的<a>标记。能够显示图标和文字,或只不过图标或文字。button的宽度能够动态收缩/展开,以适应文本标签。依照惯例接下来看看其属性、事件、方法。
属性
| 名称 | 类型 | 描写叙述信息 | 默认值 |
| id | string | 该组件的唯一标示ID | null |
| disabled | boolean | 当设置为true时标示禁用该button | false |
| toggle | boolean | 设置为true时,用户能够改变button的状态为选择或取消选择,自版本号1.3.3開始 | false |
| selected | boolean | 表明该button的状态是否为选择,自1.3.3開始 | false |
| group | string | 表明哪些button在同一个组中,開始于1.3.3 | null |
| plain | boolean | 设置为true时会显示间接效果 | false |
| text | string | button上的文字 | null |
| iconCls | string | 在左边显示一个16*16大小图标的css类 | ‘‘ |
| iconAlign | string | button上图标显示的位置,可选值为left、right、top、bottom開始于1.3.2 | left |
| size | string | button的大小,可选值为small、large開始于1.3.6 | small |
事件
linkbutton提供了一个onclik事件,当按钮被点击时触发。開始于1.3.6
方法
| 名称 | 參数 | 描写叙述信息 |
| options | none | 返回属性对象 |
| disable | none | 禁用按钮 实例: $(‘#btn‘).linkbutton(‘disable‘) |
| enable | none | 启用button,用法类似上面 |
| select | none | 选择该button開始于1.3.6 |
| unselect | none | 取消选择,開始于1.3.6 |
使用方式
linkbutton相同提供两种使用方式。
1、通过html标记创建
<a id="btn" href=http://www.mamicode.com/"#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui2、通过js脚本创建
<a id="btn" href=http://www.mamicode.com/"#">easyui>以上两种方式都能够创建linkbutton。以下看简单的样例,对于主要的链接跳转这里就不多题了。下面样例使用JQuery绑定单击处理函数给链接;
<body> <a id="btn" href=http://www.mamicode.com/"www.baidu.com" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui>好了,关于linkbutton大概也就这么多,我们能够简单的觉得其和普通的<a>标签没啥差别,仅仅是统一了easyui的样式。Pagination
对于linkbutton有了一定的了解之后就能够着手学习pagination了,值域pagination为何会依赖于linkbutton,我想主要原因还是pagination提供分页右边按钮的定制化(那些个按钮就是linkbutton啦)。闲话不多说,相同从官网api開始走起。
使用$.fn.pagination.defaults重载默认值。
pagination同意用户导航数据页面。支持可配置选项页面当行和页面长度的选择。并且用户能够加入?自己定义button在正确的分页,增强功能。
依赖组件:linkbutton
属性
分页插件具有的属性还是比較的多的,详细有例如以下一些属性:
| 名称 | 类型 | 描写叙述信息 | 默认值 |
| total | number | 总记录数,该属性在创建分页的时候是必须设置的 | 1 |
| pageSize | number | 每页显示的记录数 | 10 |
| pageNumber | number | 当分页创建完成时显示当前的页码 | 1 |
| pageList | array | 用户可以灵活的改变每页显示的记录数。可选 项存在数组中示比例如以下: $.('#pager').pagination(
{
pageList:[10,20,30]
}); | |
| loading | boolean | 定义数据是否正在加载(提醒) | false |
| buttons | array,selector | 自己定义button,两个值。 1、一个array数组,每一个button包括两个属性 iconCls:显示背景图片的css类 handler:当button被点击时调用的一个句柄函数 2、selector指示该buttons 一个简单的样例: 1、使用html标记来创建: <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>2、使用js脚本创建: <div class="easyui-pagination" style="border:1px solid #ccc" id="pager">
</div>
<script>
$('#pager').pagination({
total: 11,
buttons: [{
iconCls: 'icon-add',
handler: function () {
alert('add')
}
}, '-', {
iconCls: 'icon-save',
handler: function () {
alert('save')
}
}]
});
</script> | null |
| layout | array | 定义pagination的布局,開始于版本号 1.3.5 布局选项可能包括例如以下的值: list:页面大小集合 sep:button指间的分隔符 first:第一个button prev:前一个button next:后一个button last:最后一个button refresh:刷新button manual:手动页数的输入,同意进入的页码 links:页面数字的链接. 简单演示样例代码: <script>
$('#pager').pagination({
total: 11,
buttons: [{
iconCls: 'icon-add',
handler: function () {
alert('add')
}
}, '-', {
iconCls: 'icon-save',
handler: function () {
alert('save')
}
}],
layout:['list','sep',first','links','last']
});
</script> | |
| links | number | 链接的数量,当links被定义在layout属性中的时候该设置才有效。開始于1.3.5 | 10 |
| showPageList | boolean | 定义是否显示可选择的每页记录数。 | true |
| showRefresh | boolean | 定义是否显示刷新button。 | true |
| beforePageText | string | 在输入框之间显示的符号 | Page |
| afterPageText | string | 在输入框之后显示的符号 | of{pages} |
| dispalyMsg | string | 在插件右上方显分页信息 | Displaying {from} to {to} of {total} items |
是吧,pagination属性挺多、挺繁琐的呢。只是不必在意正是由于这样我们才干灵活的对事实上现定制化。须要说明的是最后3个属性通常是不会动的。local里面的语言js就已经定义好了。
事件
| 名称 | 属性 | 描写叙述信息 |
| onSelectPage | pageNumber,pageSize | 当用户进行翻页的时候触发,回调函数包括2个參数: pageNumber:下一页页码 pageSize:下一页显示记录数 演示样例: |
| onBeforeRefresh | pageNumber,pageSize | 刷新之前触发,返回false将取消刷新。 |
| onRefresh | pageNumber,pageSize | 刷新之后触发。 |
| onChangePageSize | pageSize | 当用户改动每页记录数时触发。 |
方法
| 名称 | 參数 | 描写叙述信息 |
| options | none | 返回分页属性对象 |
| loading | none | 提醒分页插件正在下载 |
| loaded | none | 提醒分页插件已经下载 |
| refresh | options | 刷新并显示信息。1.3可用。 $('#pp').pagination('refresh'); // 刷新页面右栏的信息
$('#pp').pagination('refresh',{ // 改变选项并刷新页面右栏的信息
total: 114,
pageNumber: 6
}); |
| select | page | 选择一个新页面。页面索引从1開始。1.3可用。 $('#pp').pagination('select'); // refresh the current page
$('#pp').pagination('select', 2); // select the second page |
使用方式
1、创建分页标记:
2、使用脚本创建:<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"> </div>
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({
total:2000,
pageSize:10
}); Demo
官网提供的pagination演示样例是一些定制,这里我就不再多提了,读者能够依据上面表格中的一些熟悉、方法自己去灵活的定制。这里我认为比較有意思的demo还是api中的。
通过面板和pagination来使用ajax分页。当用户选择一个新页面,面板将显示指定页面的对应内容。代码例如以下:
<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);依据选择的pageNumber刷新panel里面的页面内容
}">
</div>好了,基于pagination的学习先就到这了,兴许用到的地方目測会很的多的呢。
独立网站:liangtao.sinaapp.com/?p=209