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="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

2、通过js脚本创建

<a id="btn" href="#">easyui</a>
$('#btn').linkbutton({ iconCls: 'icon-search' });

以上两种方式都能够创建linkbutton。以下看简单的样例,对于主要的链接跳转这里就不多题了。

下面样例使用JQuery绑定单击处理函数给链接;

<body><a id="btn" href="www.baidu.com" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a><script>$(function () {$('#btn').bind('click', function () {alert('按钮被点击了');});});</script>
</body>

好了,关于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:下一页显示记录数演示样例: `$('#pp').pagination({ onSelectPage:function(pageNumber, pageSize){ $(this).pagination('loading'); alert('pageNumber:'+pageNumber+',pageSize:'+pageSize); $(this).pagination('loaded'); } });`
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、创建分页标记:

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;">
</div>

2、使用脚本创建:

<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