EasyUI基础入门之Pagination(分页)

前言

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

       pagination覆盖默认$.fn.pagination.defaults.Pagination分页允许用户通过分页的方式来浏览数据，它支持可配置的选项,页面导航和页面长度的选择,而且用户可以添加分页的右边定制按钮来增强分页功能。

      不过pagination是依赖于linkbutton的,因此这里有必要了解下linkbutton。

linkbutton

      使用$.fn.linkbutton.defaults重载默认值。

      链接按钮用户创建超链接按钮。它是表示正常的<a>标记。可以显示图标和文字,或仅仅只是图标或文字。按钮的宽度可以动态收缩/展开,以适应文本标签。按照惯例接下来看看其属性、事件、方法。

属性

名称类型描述信息默认值
idstring该组件的唯一标示IDnull
disabledboolean当设置为true时标示禁用该按钮false
toggleboolean设置为true时,用户可以改变按钮的状态为选择或取消选择,自版本1.3.3开始false
selectedboolean表明该按钮的状态是否为选择,自1.3.3开始false
groupstring表明哪些按钮在同一个组中,开始于1.3.3null
plainboolean设置为true时会显示间接效果false
textstring按钮上的文字null
iconClsstring在左边显示一个16*16大小图标的css类''
iconAlignstring按钮上图标显示的位置,可选值为left、right、top、bottom开始于1.3.2left
sizestring按钮的大小,可选值为small、large开始于1.3.6small

事件

       linkbutton提供了一个onclik事件,当按钮被点击时触发。开始于1.3.6

方法

名称参数描述信息                                                         
optionsnone返回属性对象
disablenone

禁用按钮

实例:

$('#btn').linkbutton('disable')

enablenone启用按钮,使用方法类似上面
selectnone选择该按钮开始于1.3.6
unselectnone取消选择,开始于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允许用户导航数据页面。支持可配置选项页面当行和页面长度的选择。而且用户可以添加自定义按钮在正确的分页,增强功能。

       依赖组件:linkbutton

 属性

       分页插件具有的属性还是比较的多的,具体有如下一些属性:

名称类型描述信息               默认值
totalnumber总记录数,该属性在创建分页的时候是必须设置的1
pageSizenumber每页显示的记录数10
pageNumbernumber当分页创建完毕时显示当前的页码    1
pageListarray

用户能够灵活的改变每页显示的记录数。可选

项存在数组中示例如下:

$.('#pager').pagination(
{
    pageList:[10,20,30]
});

 
loadingboolean定义数据是否正在载入(提醒)false
buttonsarray,selector

自定义按钮,两个值。

1、一个array数组,每个按钮包含两个属性

iconCls:显示背景图片的css类

handler:当按钮被点击时调用的一个句柄函数

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
layoutarray

定义pagination的布局,开始于版本    1.3.5

布局选项可能包含如下的值:

list:页面大小集合

sep:按钮指间的分隔符

first:第一个按钮

prev:前一个按钮

next:后一个按钮

last:最后一个按钮

refresh:刷新按钮

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>

 
linksnumber链接的数量,当links被定义在layout属性中的时候该设置才有效。开始于1.3.510
showPageListboolean定义是否显示可选择的每页记录数。true
showRefreshboolean定义是否显示刷新按钮。true
beforePageTextstring在输入框之间显示的符号Page
afterPageTextstring在输入框之后显示的符号of{pages}
dispalyMsgstring在插件右上方显分页信息Displaying {from} to {to} of {total} items

       是吧,pagination属性挺多、挺繁琐的呢。不过不必在意正是因为这样我们才能灵活的对其实现定制化。需要说明的是最后3个属性一般是不会动的。local里面的语言js就已经定义好了。

事件

名称属性描述信息
onSelectPagepageNumber,pageSize

当用户进行翻页的时候触发,回调函数包含2个参数:

pageNumber:下一页页码

pageSize:下一页显示记录数

示例:

$('#pp').pagination({
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
onBeforeRefreshpageNumber,pageSize刷新之前触发,返回false将取消刷新。
onRefreshpageNumber,pageSize刷新之后触发。
onChangePageSizepageSize当用户修改每页记录数时触发。

方法


名称参数描述信息
optionsnone返回分页属性对象                        
loadingnone提醒分页插件正在下载
loadednone提醒分页插件已经下载
refreshoptions

刷新并显示信息。1.3可用。

$('#pp').pagination('refresh');	// 刷新页面右栏的信息
$('#pp').pagination('refresh',{	// 改变选项并刷新页面右栏的信息
	total: 114,
	pageNumber: 6
});

selectpage

选择一个新页面。页面索引从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


版权声明：本文为kiritor原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。