zoukankan      html  css  js  c++  java
  • 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
    					  });					  
    					
    })();
    

      

  • 相关阅读:
    因为公司项目需要,我要学习PB了,哎
    送给自己人生的第一份生日礼物——Java小游戏!
    第二讲 Java 开发环境搭建
    IT学生关于“怎么学习”的思考,这也是其他人思考的问题吗?
    第四讲 类与对象
    第一讲 Java 介绍
    第三讲 Java 基本数据类型+运算符
    初步理解Lambda表达式的简单实现
    一道关于pack()和sizeof笔试题
    排序源码(待续)
  • 原文地址:https://www.cnblogs.com/yangliulang/p/3030486.html
Copyright © 2011-2022 走看看