ajax分页

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

  

原文地址:https://www.cnblogs.com/yangliulang/p/3030486.html