分页插件汇总

我会带着你远行 2022-08-27 15:47 254阅读 0赞

jpaginate是基于jquery的分页插件,非常轻量,没有任何侵入性,当然所能做的也就非常少.事实上它的作用仅仅是提供一个好看的分页样式,只提供一个触发事件.但是轻量带来了巨大的灵活性,让它可以提供任何内容的分页服务.

官方网站为[http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/][http_tympanus.net_codrops_2009_11_17_jpaginate-a-fancy-jquery-pagination-plugin],demo网站为[http://tympanus.net/jPaginate/][http_tympanus.net_jPaginate].

该项目好像到2009年就已经没人再更新了,但是仍然兼容现在的所有浏览器(目前还没测过IE10).因其源文件中有一点小错误,导致可能在看demo时,IE6,7,9可能会出现排版混乱的情况.这个情况是因为其判断浏览器版本的方式不对,具体代码为:

Js代码 [![收藏代码][icon_star.png]][icon_star.png 1]

1.  **var** bVer = navigator.appVersion; 
2.  **if**(bVer.indexOf('MSIE 7.0') > 0) 
3.  **var** ver = "ie7";

将其换成

Js代码 [![收藏代码][icon_star.png]][icon_star.png 1]

1.  **var** isIE = $.browser.msie; 
2.  **var** bv = $.browser.version; 
3.  **if**(isIE && bv == '7.0') 
4.  **var** ver = "ie7";

就可以了.

在附件中,已经将其改正,并做了简单的汉化.

用法:

在JSP页面中为其定义一个DIV

Html代码 [![收藏代码][icon_star.png]][icon_star.png 1]

1.  **<****div** id="pagination0"**>**
2.  
3.  **</****div****>**

然后引入jquery.paginate.js文件即可.本插件依赖jquery,本次用的是1.7.1

然后为其初始化:

Js代码 [![收藏代码][icon_star.png]][icon_star.png 1]

1.  **var** pageSize = 10;

Js代码 [![收藏代码][icon_star.png]][icon_star.png 1]

1.  $(**function**()\{ 
2.   $("\#pagination0").paginate(\{ 
3.   count : $\{pageNum\}, //此处要写清本次分页的总页数,不支持动态改变,不可写非int型数.个人建议在进入页面的时候就把页数传过来
4.   start : 1, //开始页码,从1开始,一般设置成1 //本人在这里设置为动态变化，这样页面的下标就能当前页，变为选中状态。
5.   display : 7, //在分页条上显示的个数,分页数等于或超过本设置会显示设置的个数,不够的话会显示真实个数,不过就不会出现滚动效果了.
6.   border : **false**, //是否显示外框
7.   text\_color : '\#888', //文字颜色
8.   background\_color : '\#EEE', //背景颜色
9.   text\_hover\_color : 'black', //鼠标放上去时文字的颜色
10.  background\_hover\_color : '\#CFCFCF',//鼠标放上去时背景的颜色
11.  rotate : **true**, //是否滚动
12.  images : **false**, //
13.  mouse : 'press', //可选值为'press'和'slide',具体差别请自己体验.
14.  onChange : **function**(page)\{ //本插件唯一可触发的事件,在点击页数的时候触发,只传过来当前被选中的页数,我想这其实足够了.
15.  list(page-1,pageSize); 
16.  //这里它使用的是函数，但本人不知道这个函数现在哪里，因为我写在哪里系统都报错，好在我不需要异步，直接通过window.loaction.href 跳转。直接传入pageNum即可。
17.  \} 
18.  \}); 
19.  list(0,pageSize); 
20.  \});

上面的list 方法是自己写的异步取数据的方法,亲们可自己实现自己的代码.以下列出list代码,仅供参考,请结合各自业务来完成自己的功能.

//下面这个list函数，本人放在哪里都报错。不知道为什么？

Js代码 [![收藏代码][icon_star.png]][icon_star.png 1]

1.  **function** list(start, size)\{ 
2.   $.ajax(\{ 
3.   url:"$\{ctx\}/page.do?action=list", 
4.   type:"post", 
5.   data:\{start:start,size:size\}, 
6.   dataType:"json", 
7.   timeout: 10000, 
8.   error: **function**()\{alert('请求超时，请稍候再试');\}, 
9.   success: **function**(result)\{ 
10. **var** s = **new** StringBuffer(); 
11.  $.each(result,**function**(index,value)\{ 
12.  s.append("<tr>").append("<td>").append(value.NAME).append("</td>"); 
13.  s.append("<td>").append(value.MONEY).append("</td>").append("<td>"); 
14.  s.append(value.UNIT).append("</td>").append("<td>"); 
15.  s.append("<a href='\#' onclik=\\"javascript:modify('").append(value.ID); 
16.  s.append("')\\">操作</a>").append("</td>").append("</tr>"); 
17.  \}); 
18.  $("\#mytbody").html(s.toString()); 
19.  \} 
20.  \}); 
21.  \}

顺带说一下，默认的样式是 first last 等，我们自己可以根据需要，在其提供的样式表中做修改

[http_tympanus.net_codrops_2009_11_17_jpaginate-a-fancy-jquery-pagination-plugin]: http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/
[http_tympanus.net_jPaginate]: http://tympanus.net/jPaginate/
[icon_star.png]: http://xticfc.iteye.com/images/icon_star.png
[icon_star.png 1]: /images/20220823/c6afab33c1ab48eb944f04b1361ca45a.png