<table> <thead> <tr><th>编号</th><th>姓名</th><th>年龄</th></tr> </thead> <tbody id="content2"> <tr><td>1</td><td>杨永</td><td>22</td></tr> </tbody> </table> <div id="page2"> 共计<span class="total"></span>条记录,第 <span class="cur-index"></span>/ <span class="total-page"></span>页<br /> <button class="first-page">首页</button> <button class="prev-page">上一页</button> <button class="next-page">下一页</button> <button class="last-page">尾页</button> </div> <script type="text/javascript"> (function(){ function Page(args){ var _this_=this; this.url=args.url;//保存url this.pageSize=args.pageSize;//保存分页步长 this.total=$(".total",args.pageBox);//保存所条数 this.curIndex=$(".cur-index",args.pageBox);//保存当前条数 this.totalPage=$(".total-page",args.pageBox);//保存所有页数 this.firstPage=$(".first-page",args.pageBox);//保存首页按钮 this.lastPage=$(".last-page",args.pageBox);//保存尾页 this.prev=$(".prev-page",args.pageBox); this.next=$(".next-page",args.pageBox); this.contentWrap=args.content; this.prev.click(function(){ var curVlaue=Number(_this_.curIndex.text())-1; if(curVlaue>=1){ _this_.gotoPage(curVlaue,_this_.pageSize); }; }); this.next.click(function(){ var curVlaue=Number(_this_.curIndex.text())+1; if(curVlaue<=Number(_this_.totalPage.text())){ _this_.gotoPage(curVlaue,_this_.pageSize); }; }); this.lastPage.click(function(){ _this_.init(Number(_this_.totalPage.text()),_this_.pageSize); }); this.firstPage.click(function(){ _this_.init(1,_this_.pageSize); }); this.init(1,this.pageSize); }; Page.prototype={ init:function(pageIndex,pageSize){ var _this=this; $.getJSON(this.url+"&pageIndex="+pageIndex+"&pageSize="+pageSize,function(result){ _this.total.text(result.total); _this.totalPage.text(result.totalPage); _this.curIndex.text(result.curPage); _this.addContent(result.content); }); }, addContent:function(con){ var _this=this; this.contentWrap.empty(); $(con).each(function(index, element) { _this.contentWrap.append("<tr><td>"+element.id+"</td><td>"+element.name+"</td><td>"+element.age+"</td></tr>"); }); }, gotoPage:function(pageIndex,pageSize){ this.init(pageIndex,pageSize); } }; var page=new Page({ pageBox:$("#page"), content:$("#content"), url:"http://192.168.226.118:8080/soperamasks/data2.jsp?callBack=?", pageSize:8 }); var page2=new Page({ pageBox:$("#page2"), content:$("#content2"), url:"http://192.168.226.118:8080/soperamasks/data2.jsp?callBack=?", pageSize:5 }); })();