自己写的一个分页效果

js部分：

/*

* author: zhouwei
* Date:2013-05-21
* description: 分页查询
*/

(function(b) {
    b.waterfall = b.waterfall || {};
    b.extend(b.waterfall, {
        version: "1.0.1",
        htmlDecode: function(b) {
            return b && ("&nbsp;" === b || "&#160;" === b || 1 === b.length && 160 === b.charCodeAt(0)) ? "": !b ? b: ("" + b).replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '"').replace(/&amp;/g, "&");
        },
        htmlEncode: function(b) {
            return ! b ? b: ("" + b).replace(/&/g, "&amp;").replace(/\"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        },
        getAccessor: function(b, f) {
            var c, e, a = [],
            j;
            if ("function" === typeof f) return f(b);
            c = b[f];
            if (void 0 === c) try {
                if ("string" === typeof f && (a = f.split(".")), j = a.length) for (c = b; c && j--;) e = a.shift(),
                c = c[e];
            } catch(g) {}
            return c;
        },
        getMethod: function(d) {
            return this.getAccessor(b.fn.waterfall, d);
        },
        serializeGridData:function(d){
            return b.extend({
                page: d.page,
                rows: d.rows,
                _search:false,
                nd:Math.ceil(Math.random()*1000),
                filters:d.filters,
                sord: d.sord,
                sidx: d.sidx},d.postData);
        },
        extend: function(d) {
            b.extend(b.fn.waterfall, d);
            this.no_legacy_api || b.fn.extend(d);
        }
    });
    b.fn.waterfall = function(d) {
        if ("string" === typeof d) {
            var f = b.waterfall.getMethod(d);
            if (!f) throw "waterfall - No such method: " + d;
            var c = b.makeArray(arguments).slice(1);
            return f.apply(this, c);
        }
        var e = b.extend(!0, {
            url: "",
            height: 150,
            page: 1,
            rows: 20,
            rowTotal: null,
            records: 0,
            colNames: [],
            colModel:[],
            rowList: [],
            filters:{},
            postData:{},
            sord: "desc",
            sidx: "",
            datatype: "xml",
            
        },a=this,
        b.waterfall.defaults, d || {});
        if(e.colNames.length!= e.colModel.length){
            alert("标题行列数与数据行列数不一致.");
            return;
        }
        if($(this).find("thead").empty()){
            var title="<tr>";
            jQuery.each(e.colNames,function(i){
                title+='<th>'+this+'</th>';
            });
            title+="</tr>";
            $(this).find("thead").append(title);
        }
        if($(this).find("tbody").empty()){
            jQuery.ajax({  
                type : "post",  
                url : e.url,  
                data : b.waterfall.serializeGridData.call(this,e),
                dataType:"json",
                async : false,  
                success : function(data){
                        var content ="";
                        jQuery.each(data.data,function(i){
                            content +="<tr>";
                            for(var k=0;k<e.colModel.length;k++){
                                var v =(e.colModel[k].name&&e.colModel[k].name!='undefined'?data.data[i][e.colModel[k].name]:"");
                                if(e.colModel[k].type && e.colModel[k].type!='undefined'){
                                    switch(e.colModel[k].type){
                                        case 'text':
                                            if(e.colModel[k].formatter&&e.colModel[k].formatter!='undefined'){
                                                m = b.waterfall.getMethod(e.colModel[k].formatter);
                                                v=m.call(this,v);
                                            }
                                            if(v!=0){
                                                v =v||"";
                                            }
                                            m = b.waterfall.getMethod("limitLength");
                                            content += ("<td title='"+v+"'>"+m.call(this,v)+"</td>");
                                        break;
                                        case 'checkbox':
                                            content += ("<td><input  type='checkbox' name='rcid' value='"+v+"' class='input_style'/></td>");
                                        break;
                                        case 'defined':
                                            if(e.colModel[k].formatter&&e.colModel[k].formatter!='undefined' ){
                                                m = b.waterfall.getMethod(e.colModel[k].formatter);
                                                v=m.call(this,v&&v!='undefined'?escape(v):'',data.data[i]);
                                            }
                                            content += ("<td>"+v+"</td>");
                                        break;
                                        default:
                                            content += ("<td title=''></td>");
                                        break;
                                    }
                                }else{
                                    content += ("<td title=''></td>");
                                }
                            }
                            content +="</tr>";
                            
                        });
                        b(a).find("tbody").append(content);
                        //全选
                        b(a).find("thead").find("#all").click(function(){
                            if(this.checked){
                                b(a).find("tbody").find("input[name='rcid']").each(function(){
                                    this.checked =true;
                                });
                            }else{
                                b(a).find("tbody").find("input[name='rcid']").each(function(){
                                    this.checked =false;
                                });
                            }
                        });
                        b(a).find("tbody").find("input[name='rcid']").each(function(){
                            b(this).click(function(){
                                m = b.waterfall.getMethod("isAll");
                                m.call(this,a,this,"all");
                            });
                        });
                        //维护分页底部
                        b("#page").find(".pageObj").empty();
                        b("#pagenum_select").val(data.rows);
                        if(data.page && data.total){
                            b("#page").find(".totalPage").html(data.total);
                            b("#page").find(".lastPage").attr("data-name",data.total);
                            b("#page").find(".prevPage").css("display","block");
                            b("#page").find(".nextPage").css("display","block");
                            b("#page").find(".prevPage").attr("data-name",data.page>1?data.page-1:"");
                            b("#page").find(".nextPage").attr("data-name",data.page<data.total?data.page+1:"");
                            if(data.total<=5){
                                if(data.page<=1){
                                    b("#page").find(".prevPage").css("display","none");
                                }
                                if(data.page>=data.total){
                                    b("#page").find(".nextPage").css("display","none");
                                }
                                for(var i=1;i<=data.total;i++){
                                    b("#page").find(".pageObj").append('<li data-name="'+i+'" class="pageNum '+(i==data.page?'active':'')+'" style="display: block;">'+i+'</li>');
                                }
                            }else{
                                for(var i=0;i<data.total;i++){
                                if(data.total-data.page>=2){
                                    b("#page").find(".prevPage").attr("data-name",data.page-1);
                                    b("#page").find(".nextPage").attr("data-name",data.page+1);
                                    for(var i=data.page-2;i<=data.page+2;i++){
                                        b("#page").find(".pageObj").append('<li data-name="'+i+'" class="pageNum '+(i==data.page?'active':'')+'" style="display: list-item;">'+i+'</li>');
                                    }
                                }else{
                                    b("#page").find(".prevPage").attr("data-name",data.page-1);
                                    if(data.page>=data.total){
                                        b("#page").find(".nextPage").css("display","none");
                                    }else{
                                        b("#page").find(".nextPage").attr("data-name",data.page+1);
                                    }
                                    for(var i=data.total-4;i<=data.total;i++){
                                        b("#page").find(".pageObj").append('<li data-name="'+i+'" class="pageNum '+(i==data.page?'active':'')+'" style="display: list-item;">'+i+'</li>');
                                    }
                                }
                            }
                        }
                    }
                    //上一页
                    jQuery("#page").find(".prevPage").click(function(){
                            if(jQuery(this).attr("data-name")){
                                    param["page"] = jQuery(this).attr("data-name");
                                    jQuery("#dataTable").waterfall(param);
                            }
                        });
                    //下一页
                    jQuery("#page").find(".nextPage").click(function(){
                        if(jQuery(this).attr("data-name")){
                            param["page"] = jQuery(this).attr("data-name");
                            jQuery("#dataTable").waterfall(param);
                        }
                    });
                    //页码
                    jQuery(".pageObj").find(".pageNum").each(function(){
                        jQuery(this).click(function(){
                            if(jQuery(this).attr("data-name")){
                                if(!$(this).hasClass('active')){
                                    $(this).addClass('active');
                                    $(this).siblings().removeClass('active');
                                    param["page"] = jQuery(this).attr("data-name");
                                    jQuery("#dataTable").waterfall(param);
                                }
                            }
                        });
                    });
                }
            });
        }
        return this;
    };
    //二次拓展
    b.waterfall.extend({
        showInfo:function (value) {
            var content ="";
            if(value){
                for(var i=0;i<value.split(",").length;i++){
                    if(i!=0){
                        content+=",";
                    }
                    content+=(value.split(",")[i].split("|"))[1];
                }
            }
            return content;
        },
        limitLength:function(value){
            return value.length!='undefined' && value.length>8?value.substring(0,8)+"...":value;
        },
        isAll:function (a,obj,allBtn){
            if(obj.checked){
                var result = true;
                b(a).find("tbody").find("input[name='rcid']").each(function(){
                    result =result&&this.checked;
                });
                if(result){
                    b("#"+allBtn).each(function(){
                        this.checked = true;
                    });
                }
            }else{
                b("#"+allBtn).each(function(){
                    this.checked = false;
                });
            }
        }
    });
    //加载事件
    
})(jQuery);

页面部分：

        <div class="kcdata-wrap" id="kcdata-wrap-havechoice">
          <h2 class="kecheng-title">
          <label>课程列表</label>
          <a href="javascript:void(0)" οnclick="downloadClassSchedule('${sessionScope.SECURITY_CONTEXT.userSession.t_class_id}');" class="down-class" id="down-class">下载课表</a>
          </h2>
          <div class="dataDiv">
              <table id="dataTable" class="dataTable">
                  <thead></thead>
                <tbody></tbody>
              </table>
          </div>
          <div id="page" class="page">
           <ul class="pageMenu">
             <li data-name="1" class="firstPage">首页</li>
             <li data-name="" class="prevPage"> &lt; </li>
                  <ul class="pageObj">
                     <li data-name="1" class="pageNum" style="display: list-item;">1</li>
                     <li data-name="2" class="pageNum active" style="display: list-item;">2</li>
                     <li data-name="3" class="pageNum" style="display: list-item;">3</li>
                     <li data-name="4" class="pageNum" style="display: list-item;">4</li>
                     <li data-name="5" class="pageNum" style="display: list-item;">5</li>
                     <li data-name="6" class="pageNum" style="display: none;">6</li>
                     <li data-name="7" class="pageNum" style="display: none;">7</li>
                     <li data-name="8" class="pageNum" style="display: none;">8</li>
                 </ul>
             <li data-name="" class="nextPage"> &gt; </li>
             <li data-name="" class="lastPage">尾页</li>
             <li class="pagechoose">
            <select id="pagenum_select">
               <option value ="10">10</option>
               <option selected="selected" value ="20">20</option>
               <option value="30">30</option>
           </select>
                     条/页</li>
             <li class="last" style="font-size: 14px;">
                       共<span class="totalPage"></span>页，跳转至 <input  type="number" class="keuInput" value="1">
               <button type="button" class="btnSure">确定</button>
             </li>
           </ul>
        </div>
        </div>

页面调用部分：

     param ={
            url:contextPath+"/student/course/course-manage-my_course.json",
            datatype:"json",
            colNames:['字段1,'字段2',字段3','字段4','字段5','字段6','字段7'],
            colModel:[{name:"name",type:"text"},{name:"studyType",type:"text"},{name:"semester",formatter:"showInfo",type:"text"},{name:"courseType",type:"text"},{name:"period",type:"text"},{name:"score",type:"text"},{name:"outline",type:"text"}],
            sortname:"tc.id",
            rows:jQuery("#page").find("#pagenum_select").val(),
            rowList:[10,20,30],
            //filters    {"groupOp":"AND","rules":[{"field":"ts.name","op":"eq","data":"测试学院"}]}
            filters:{},
            postData:{"t_class_id":t_class_id},
            sord: "asc",
            sidx: "tc.courseType"
        };
    jQuery("#dataTable").waterfall(param);
    jQuery("#page").find("#pagenum_select").change(function(){
        param["rows"] = this.value;
        jQuery("#dataTable").waterfall(param);
    });
    //首页
    jQuery("#page").find(".firstPage").click(function(){
        if(param["page"] = jQuery(this).attr("data-name")){
            param["page"] = jQuery(this).attr("data-name");
            jQuery("#dataTable").waterfall(param);
        }
    });
    //尾页
    jQuery("#page").find(".lastPage").click(function(){
        if(jQuery(this).attr("data-name")){
            param["page"] = jQuery(this).attr("data-name");
            jQuery("#dataTable").waterfall(param);
        }
    });
    //跳转页
    jQuery("#page").find(".btnSure").click(function(){
        if(jQuery("#page").find(".keuInput").val()){
            param["page"] = jQuery("#page").find(".keuInput").val();
            jQuery("#dataTable").waterfall(param);
        }
    });
    //总共页面数量
    jQuery("#page").find(".keuInput").change(function(){
        if(this.value>jQuery("#page").find(".totalPage").html()){
            this.value = jQuery("#page").find(".totalPage").html();
        }
        if(this.value<=0){
            this.value=1;
        }
    });