EasyUI基础入门之Pagination(分页)

于 2014-06-03 09:20:28 发布
阅读量1.1k 收藏 1
点赞数

前言

        对于一些企业级的应用来说(非网站),页面上最为主要的内容也就是表格和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标记创建

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>  

       2、通过js脚本创建 
<div class="dp-highlighter bg_html" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 936.53125px; overflow: hidden; padding-top: 1px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/black/html.gif); background-color: rgb(51, 51, 51); opacity: 0.6; margin: 18px 0px !important; background-position: 100% 0%; background-repeat: no-repeat no-repeat;"><div class="bar" style="position: relative; padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(153, 153, 153);"><strong>[html]</strong> <a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="ViewSource" title="view plain" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">view plain</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="CopyToClipboard" title="copy" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">copy</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="PrintSource" title="print" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">print</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="About" title="?" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">?</a><a target=_blank href="https://code.csdn.net/snippets/373734" target="_blank" title="在CODE上查看代码片" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px;"><img src="https://code.csdn.net/assets/CODE_ico.png" width="12" height="12" alt="在CODE上查看代码片" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" /></a><a target=_blank href="https://code.csdn.net/snippets/373734/fork" target="_blank" title="派生到我的代码片" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px;"><img src="https://code.csdn.net/assets/ico_fork.svg" width="12" height="12" alt="派生到我的代码片" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" /></a><div style="position: absolute; left: 483px; top: 1654px; width: 29px; height: 14px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="29" height="14" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=29&height=14" wmode="transparent" /></div></div></div><ol start="1" class="dp-xml" style="padding: 0px; border: none; position: relative; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important;"><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">a</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">id</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"btn"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">href</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"#"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">easyui</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">a</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">$('#btn').linkbutton({ iconCls: 'icon-search' });  </span></li></ol></div>
        以上两种方式都可以创建linkbutton。下面看简单的例子,对于基本的链接跳转这里就不多题了。

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

<div class="dp-highlighter bg_html" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 936.53125px; overflow: hidden; padding-top: 1px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/black/html.gif); background-color: rgb(51, 51, 51); opacity: 0.6; margin: 18px 0px !important; background-position: 100% 0%; background-repeat: no-repeat no-repeat;"><div class="bar" style="position: relative; padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(153, 153, 153);"><strong>[html]</strong> <a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="ViewSource" title="view plain" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">view plain</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="CopyToClipboard" title="copy" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">copy</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="PrintSource" title="print" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">print</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="About" title="?" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">?</a><a target=_blank href="https://code.csdn.net/snippets/373734" target="_blank" title="在CODE上查看代码片" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px;"><img src="https://code.csdn.net/assets/CODE_ico.png" width="12" height="12" alt="在CODE上查看代码片" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" /></a><a target=_blank href="https://code.csdn.net/snippets/373734/fork" target="_blank" title="派生到我的代码片" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px;"><img src="https://code.csdn.net/assets/ico_fork.svg" width="12" height="12" alt="派生到我的代码片" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" /></a><div style="position: absolute; left: 483px; top: 1807px; width: 29px; height: 14px; z-index: 99;"><embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="29" height="14" name="ZeroClipboardMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=29&height=14" wmode="transparent" /></div></div></div><ol start="1" class="dp-xml" style="padding: 0px; border: none; position: relative; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important;"><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">body</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">    <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">a</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">id</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"btn"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">href</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"www.baidu.com"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">class</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"easyui-linkbutton"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">data-options</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"iconCls:'icon-search'"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">easyui</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">a</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">    <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">script</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">        $(function () {  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">            $('#btn').bind('click', function () {  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">                alert('按钮被点击了');  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">            });  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">        });  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;">    <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">script</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">body</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li></ol></div>
        好了,关于linkbutton大概也就这么多,我们可以简单的认为其和普通的<a>标签没啥区别,只是统一了easyui的样式。

 Pagination

       对于linkbutton有了一定的了解之后就可以着手学习pagination了,值域pagination为何会依赖于linkbutton,我想主要原因还是pagination提供分页右边按钮的定制化(那些个按钮就是linkbutton啦)。闲话不多说,同样从官网api开始走起。

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

       pagination允许用户导航数据页面。支持可配置选项页面当行和页面长度的选择。而且用户可以添加自定义按钮在正确的分页,增强功能。

       依赖组件:linkbutton

 属性

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

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

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

项存在数组中示例如下:

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. $.('#pager').pagination(  
  2. {  
  3.     pageList:[10,20,30]  
  4. });  

 
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="

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1.     total: 114,  
  2.     buttons: [{  
  3.         iconCls:'icon-add',  
  4.         handler:function(){alert('add')}  
  5.        },'-',{  
  6.        iconCls:'icon-save',  
  7.        handler:function(){alert('save')}  
  8. }]">  
  9. </div>  

  2、使用js脚本创建:

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <div class="easyui-pagination" style="border:1px solid #ccc" id="pager">  
  2. </div>  
  3. <script>  
  4.  $('#pager').pagination({  
  5.     total: 11,  
  6.     buttons: [{  
  7. iconCls: 'icon-add',  
  8. handler: function () {  
  9. alert('add')  
  10. }  
  11.    }, '-', {  
  12. iconCls: 'icon-save',  
  13. handler: function () {  
  14. alert('save')  
  15. }  
  16. }]  
  17.     });  
  18. </script>  

null
layoutarray

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

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

list:页面大小集合

sep:按钮指间的分隔符

first:第一个按钮

prev:前一个按钮

next:后一个按钮

last:最后一个按钮

refresh:刷新按钮

manual:手动页数的输入,允许进入的页码

links:页面数字的链接.

简单示例代码:

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <script>  
  2. $('#pager').pagination({  
  3. total: 11,  
  4. buttons: [{  
  5. iconCls: 'icon-add',  
  6. handler: function () {  
  7. alert('add')  
  8. }  
  9.    }, '-', {  
  10. iconCls: 'icon-save',  
  11. handler: function () {  
  12. alert('save')  
  13. }  
  14.    }],  
  15. layout:['list','sep',first','links','last']  
  16. });   
  17. </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:下一页显示记录数

示例:

     
     

      
      

       
       

        
        [html] 
        
        view plain
        
        copy
        
        print
        
        ?
        
        在CODE上查看代码片
        
        派生到我的代码片
        
        

       
       

      
      

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

方法


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

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

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. $('#pp').pagination('refresh'); // 刷新页面右栏的信息  
  2. $('#pp').pagination('refresh',{ // 改变选项并刷新页面右栏的信息  
  3.     total: 114,  
  4.     pageNumber: 6  
  5. });  

selectpage

选择一个新页面。页面索引从1开始。1.3可用。

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. $('#pp').pagination('select');  // refresh the current page  
  2. $('#pp').pagination('select', 2);   // select the second page  


使用方式

     1、创建分页标记:

<div class="dp-highlighter bg_html" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 936.53125px; overflow: hidden; padding-top: 1px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/black/html.gif); background-color: rgb(51, 51, 51); opacity: 0.6; margin: 18px 0px !important; background-position: 100% 0%; background-repeat: no-repeat no-repeat;"><div class="bar" style="position: relative; padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(153, 153, 153);"><strong>[html]</strong> <a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="ViewSource" title="view plain" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">view plain</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="CopyToClipboard" title="copy" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">copy</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="PrintSource" title="print" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">print</a><a target=_blank href="http://blog.csdn.net/lcore/article/details/28149837#" class="About" title="?" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-position: initial initial; background-repeat: initial initial;">?</a><a target=_blank href="https://code.csdn.net/snippets/373734" target="_blank" title="在CODE上查看代码片" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px;"><img src="https://code.csdn.net/assets/CODE_ico.png" width="12" height="12" alt="在CODE上查看代码片" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" /></a><a target=_blank href="https://code.csdn.net/snippets/373734/fork" target="_blank" title="派生到我的代码片" style="color: rgb(204, 204, 204); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px;"><img src="https://code.csdn.net/assets/ico_fork.svg" width="12" height="12" alt="派生到我的代码片" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" /></a><div style="position: absolute; left: 483px; top: 5498px; width: 29px; height: 14px; z-index: 99;"><embed id="ZeroClipboardMovie_11" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="29" height="14" name="ZeroClipboardMovie_11" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=11&width=29&height=14" wmode="transparent" /></div></div></div><ol start="1" class="dp-xml" style="padding: 0px; border: none; position: relative; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important;"><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">div</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">id</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"pp"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">class</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"easyui-pagination"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">data-options</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"total:2000,pageSize:10"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">style</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; background-color: inherit;">"background:#efefef;border:1px solid #ccc;"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(153, 153, 153); list-style: decimal-leading-zero outside; color: rgb(238, 238, 238); line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: rgb(255, 255, 255); background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">div</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(102, 204, 255); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">    </span></span></li></ol></div>
      2、使用脚本创建:

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>    
  2.     <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>  
  3.  $('#pp').pagination({     
  4.     total:2000,     
  5.     pageSize:10     
  6. });    

Demo

      官网提供的pagination示例是一些定制,这里我就不再多提了,读者可以根据上面表格中的一些熟悉、方法自己去灵活的定制。这里我觉得比较有意思的demo还是api中的。

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

[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <div id="content" class="easyui-panel" style="height:200px" data-options="href:'show_content.php?page=1'">  
  2.     </div>  
  3.     <div class="easyui-pagination" style="border:1px solid #ccc;" data-options="     
  4.             total: 2000,     
  5.             pageSize: 10,    
  6.                                                                                   
  7.             onSelectPage: function(pageNumber, pageSize){     
  8.                 $('#content').panel('refresh', 'show_content.php?page='+pageNumber);根据选择的pageNumber刷新panel里面的页面内容   
  9.             }">  
  10.     </div>  

        好了,基于pagination的学习先就到这了,后续用到的地方目测会非常的多的呢。

        独立站点:liangtao.sinaapp.com/?p=209


果冻还不错
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值