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 +="<table width='100%' border='0' cellspacing='0' cellpadding='0'>";
        html +="    <tr>";
        html +="        <td>"
        html +="            <table border='0' align='right' cellpadding='0' cellspacing='0' style='float: none; width: 100%;'>";
        html +="                <tr>";      
        html +="                    <td class='STYLE4' style='font-size: 14px;'>  总记录数:"+view.rowCount+"条 |每页显示:"+view.pageSize+"条 | 总页数:"+view.pageCount+"页</td>";
        html +="                    <td>";
        html +="                        <table border='0' align='right' cellpadding='0' cellspacing='0'>";
        html +="                            <tr>";
        html +="                                <td style='font-size: 14px;' width='120' class='STYLE4'>设置每页显示条数</td>";     
        html +="                                <td class='STYLE4'> <input value='"+view.pageSize+"' style='width:30px'/> </td>";       
        html +="                                <td class='STYLE4' ><a href='javascript:' data-pageNow='1'>   首页</a></td>";
        
        if(view.pageNow==1){                
            html +="                            <td width='45' class='STYLE4'><a href='javascript:' data-pageNow='1' >上一页</a></td>";
        }else{  
            var pageNow = view.pageNow-1;
            html +="                            <td width='45' class='STYLE4'><a href='javascript:' data-pageNow='"+pageNow+"' >上一页</a></td>";
        }
        
        html+="                                 <td align='center'>";
        if(view.pageindex.startindex && view.pageindex.endindex){           
            for(i=view.pageindex.startindex;i<=view.pageindex.endindex;i++){
                if(i==view.pageNow){
                    html +="                             <span class='current' style='color: red;font-size: 14px'>"+i+"</span>";
                }else{
                    html +="                             <a href='javascript:' data-pageNow='"+i+"' >"+i+"</a>";
                }
            }
        }
        html +="                                </td>";
        
        
        if(view.pageNow==view.pageCount){
            html +="                            <td><a href='javascript:' data-pageNow='"+view.pageCount+"' >下一页</a></td>";
        }else{
            var pageNow = view.pageNow+1;
            html +="                            <td><a href='javascript:' data-pageNow='"+pageNow+"' >下一页</a></td>";
        }
        
        html +="                                <td><a href='javascript:' data-pageNow='"+view.pageCount+"' >尾页</a></td>";
        
        html +="                            </tr>";
        html +="                        </table>";      
        html +="                    </td>";
        html +="                </tr>";     
        html +="            </table>";
        html +="        </td>"
        html +="    </tr>";
        html +="</table>";
        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代码

<div id="lends"></div>
<div id="page"></div>