分页插件

mypage.js

;(function(){
    //强制使用严格的格式
    'use strict';
    
    var def = {'pageSize':10,'pageNow':1,'pageCount':1,'pageindex':{}}; 
    
    $.fn.extend({
        mypage:function(options){
            //合并参数
            $.extend(true,def,options);
            var $this = $(this);
            //返回编辑的html
            var opt = $.fn.mypage.callback(def);
            $.extend(true,def,opt);
            var pghtml = $.fn.mypage.createhtml(def);
            //写入到页面
            $(this).html(pghtml);
            //添加input监听事件
            $(this).on("change","input",function(){
                def.pageSize = $(this).val();
                var opt = $.fn.mypage.callback(def);
                $.extend(true,def,opt);
                change($this);
            });
            $(this).on("click","a",function(){
                //如果是分页的a标签
                var val = $(this).attr("data-pageNow");
                if(val){                    
                    def.pageNow = val;
                    var opt = $.fn.mypage.callback(def);
                    $.extend(true,def,opt);
                    change($this);
                }
            });
            return this;
        }
    });
    
    var change = function(element){
        var pghtml = $.fn.mypage.createhtml(def);
        //写入到页面
        element.html(pghtml);
    }
    //获取JSON对象方法用于覆盖
    $.fn.mypage.callback = function(def){
        return def;
    }
    
    $.fn.mypage.createhtml = function(pageview){
        var view = pageview;
        var html = "";
        html +="";
        html +="    ";
        html +="        "
        html +="    ";
        html +="
"
        html +="            ";
        html +="                ";      
        html +="                    ";
        html +="                    ";
        html +="                ";     
        html +="            
  总记录数:"+view.rowCount+"条 |每页显示:"+view.pageSize+"条 | 总页数:"+view.pageCount+"页
";
        html +="                        ";
        html +="                            ";
        html +="                                ";     
        html +="                                ";       
        html +="                                ";
        
        if(view.pageNow==1){                
            html +="                            ";
        }else{  
            var pageNow = view.pageNow-1;
            html +="                            ";
        }
        
        html+="                                 ";
        
        
        if(view.pageNow==view.pageCount){
            html +="                            ";
        }else{
            var pageNow = view.pageNow+1;
            html +="                            ";
        }
        
        html +="                                ";
        
        html +="                            ";
        html +="                        
设置每页显示条数
  
   首页
上一页
上一页
";
        if(view.pageindex.startindex && view.pageindex.endindex){           
            for(i=view.pageindex.startindex;i<=view.pageindex.endindex;i++){
                if(i==view.pageNow){
                    html +="                             "+i+"";
                }else{
                    html +="                             "+i+"";
                }
            }
        }
        html +="                                
下一页
下一页
尾页
";      
        html +="                    
";
        html +="        
";
        return html;
    }
    
})(window.Zepto || window.jQuery);

调用

$.fn.mypage.callback = function(def){
                        var object = {};
                        $.ajax({
                            url     : ""+path + "/investrecord/getInvestRecord.html?id="+product_id+"&pageSize="+def.pageSize+"&pageNow="+def.pageNow,
                            type    : "GET",
                            async   : false, 
                            dataType: "json",
                            success : function(obj){
                                setLends(obj);
                                object=obj;
                            }
                        });
                        return object;
                    }   
                    
$("#page").mypage();

HTML代码