easyui php分页,EasyUI基础入门之Pagination(分页)

前言

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

pagination覆盖默认$.fn.pagination.defaults.Pagination分页同意用户通过分页的方式来浏览数据，它支持可配置的选项,页面导航和页面长度的选择,并且用户能够加入?分页的右边定制button来增强分页功能。

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

linkbutton

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

链接button用户创建超链接button。它是表示正常的标记。能够显示图标和文字,或只不过图标或文字。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标记创建

easyui

2、通过js脚本创建

easyui

$('#btn').linkbutton({ iconCls: 'icon-search' });

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

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

easyui

$(function () {

$('#btn').bind('click', function () {

alert('按钮被点击了');

});

});

好了,关于linkbutton大概也就这么多,我们能够简单的觉得其和普通的标签没啥差别,仅仅是统一了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标记来创建:

2、使用js脚本创建:

$('#pager').pagination({

total: 11,

buttons: [{

iconCls: 'icon-add',

handler: function () {

alert('add')

}

}, '-', {

iconCls: 'icon-save',

handler: function () {

alert('save')

}

}]

});

null

layout

array

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

布局选项可能包括例如以下的值:

list:页面大小集合

sep:button指间的分隔符

first:第一个button

prev:前一个button

next:后一个button

last:最后一个button

refresh:刷新button

manual:手动页数的输入,同意进入的页码

links:页面数字的链接.

简单演示样例代码:

$('#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']

});

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、创建分页标记:

2、使用脚本创建:

$('#pp').pagination({

total:2000,

pageSize:10

});

Demo

官网提供的pagination演示样例是一些定制,这里我就不再多提了,读者能够依据上面表格中的一些熟悉、方法自己去灵活的定制。这里我认为比較有意思的demo还是api中的。

通过面板和pagination来使用ajax分页。当用户选择一个新页面,面板将显示指定页面的对应内容。代码例如以下:

好了,基于pagination的学习先就到这了,兴许用到的地方目測会很的多的呢。