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

      

  • 相关阅读:
    如何解决移动端滚动穿透问题
    如何在mac中通过命令行使用sublime
    正向代理和反向代理
    UTF8、UTF16、UTF16-LE、UTF16-BE、UTF32都是些什么?
    依赖的版本
    如何移除inline-block元素之间的空白
    如何用JavaScript重定向到另一个网页?
    [读书笔记] 高性能网站建设指南
    java使用jconsole查看java程序运行(jmx原理)
    oracle相关知识点
  • 原文地址:https://www.cnblogs.com/yangliulang/p/3030486.html
Copyright © 2020-2023  润新知