分页插件汇总

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可能会出现排版混乱的情况.这个情况是由于其推断浏览器版本号的方式不正确,详细代码为:

 

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

 

 

将其换成

 

var isIE = $.browser.msie;
var bv = $.browser.version;
if(isIE && bv == '7.0')
    var ver = "ie7";

 

 就能够了.

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

使用方法:

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

 

<div id="pagination0">

            </div>

 

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

然后为其初始化:

 

var pageSize = 10;

 

$(function(){
        $("#pagination0").paginate({
            count       : ${pageNum},   //此处要写清本次分页的总页数,不支持动态改变,不可写非int型数.个人建议在进入页面的时候就把页数传过来
            start       : 1,            //開始页码,从1開始,一般设置成1  //本人在这里设置为动态变化。这样页面的下标就能当前页，变为选中状态。
            display     : 7,            //在分页条上显示的个数,分页数等于或超过本设置会显示设置的个数,不够的话会显示真实个数,只是就不会出现滚动效果了.
            border                  : false,    //是否显示外框
            text_color              : '#888',   //文字颜色
            background_color        : '#EEE',   //背景颜色
            text_hover_color        : 'black',  //鼠标放上去时文字的颜色
            background_hover_color  : '#CFCFCF',//鼠标放上去时背景的颜色
            rotate                  : true,     //是否滚动
            images                  : false,    //
            mouse                   : 'press',  //可选值为'press'和'slide',详细区别请自己体验.
            onChange                : function(page){//本插件唯一可触发的事件,在点击页数的时候触发,仅仅传过来当前被选中的页数,我想这事实上足够了.
                                        list(page-1,pageSize);
                                       //这里它使用的是函数。但本人不知道这个函数如今哪里，由于我写在哪里系统都报错，好在我不须要异步，直接通过window.loaction.href 跳转。直接传入pageNum就可以。
                                      }
            });
        list(0,pageSize);
    });

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

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

function list(start, size){
        $.ajax({
            url:"${ctx}/page.do?action=list",
            type:"post",
            data:{start:start,size:size},
            dataType:"json",
            timeout: 10000,
            error: function(){alert('请求超时，请稍候再试');},
            success: function(result){
                var s = new StringBuffer();
                $.each(result,function(index,value){
                    s.append("<tr>").append("<td>").append(value.NAME).append("</td>");
                    s.append("<td>").append(value.MONEY).append("</td>").append("<td>");
                    s.append(value.UNIT).append("</td>").append("<td>");
                    s.append("<a href='#' onclik="javascript:modify('").append(value.ID);
                    s.append("')">操作</a>").append("</td>").append("</tr>");
                });
                $("#mytbody").html(s.toString());
            }
        });
    }

 

顺带说一下，默认的样式是 first   last 等，我们自己能够依据须要，在其提供的样式表中做改动