<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
});
})();