天天看点
返回

EasyUI基础入门之Pagination(分页)

前言

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

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

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

linkbutton

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

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

属性

名称 类型 描述信息 默认值
id string 该组件的唯一标示ID null
disabled boolean 当设置为true时标示禁用该按钮 false
toggle boolean 设置为true时,用户可以改变按钮的状态为选择或取消选择,自版本1.3.3开始 false
selected boolean 表明该按钮的状态是否为选择,自1.3.3开始 false
group string 表明哪些按钮在同一个组中,开始于1.3.3 null
plain boolean 设置为true时会显示间接效果 false
text string 按钮上的文字 null
iconCls string 在左边显示一个16*16大小图标的css类 ''
iconAlign string 按钮上图标显示的位置,可选值为left、right、top、bottom开始于1.3.2 left
size string 按钮的大小,可选值为small、large开始于1.3.6 small

事件

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

方法

名称 参数 描述信息                                                         
options none 返回属性对象
disable none

禁用按钮

实例:

$('#btn').linkbutton('disable')
enable none 启用按钮,使用方法类似上面
select none 选择该按钮开始于1.3.6
unselect none 取消选择,开始于1.3.6

 使用方式

       linkbutton同样提供两种使用方式。

       1、通过html标记创建

<a id="btn" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

       2、通过js脚本创建

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

        以上两种方式都可以创建linkbutton。下面看简单的例子,对于基本的链接跳转这里就不多题了。

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

<body>
	<a id="btn" href="www.baidu.com" target="_blank" rel="external nofollow"  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

 属性

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

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

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

项存在数组中示例如下:

$.('#pager').pagination(
{
    pageList:[10,20,30]
});
loading boolean 定义数据是否正在载入(提醒) false
buttons array,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
layout array

定义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>
links number 链接的数量,当links被定义在layout属性中的时候该设置才有效。开始于1.3.5 10
showPageList boolean 定义是否显示可选择的每页记录数。 true
showRefresh boolean 定义是否显示刷新按钮。 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

【JQuery EasyUI】 easyui Pagination
上一篇: 需求分析 - linFen
下一篇: 基于oracle的分页功能(jdbc实现)

继续阅读