分页插件汇总

标签：style   blog   http   java   color   使用   

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

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

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

Js代码  

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

将其换成

Js代码  

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

 就可以了.

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

用法:

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

Html代码  

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

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

然后为其初始化:

Js代码  

1. var pageSize = 10;  

Js代码  

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代码  

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 等，我们自己可以根据需要，在其提供的样式表中做修改

分页插件汇总,布布扣,bubuko.com

分页插件汇总

标签：style   blog   http   java   color   使用   

原文地址：http://blog.csdn.net/baicp3/article/details/37911665