zoukankan      html  css  js  c++  java
  • ajax分页

    主页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="../../bootstrap/js/jquery-1.11.2.min.js"></script>
    <script src="../../bootstrap/js/bootstrap.min.js"></script>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <table class="table table-striped">
      <caption>中国省市区信息</caption>
      <thead>
        <tr>
          <th>地区代号</th>
          <th>地区名称</th>
          <th>父级代号</th>
        </tr>
      </thead>
      <tbody id="nr">
        
      </tbody>
    </table>
    
    <div style="30%; margin:0px auto">
    	<ul class="pagination" id="pagelist">
           <!-- <li><a>«</a></li>
            <li class="active"><a>1</a></li>
            <li class="disabled"><a>2</a></li>
            <li><a>3</a></li>
            <li><a>4</a></li>
            <li><a>5</a></li>
            <li><a>»</a></li>-->
        </ul>
    </div>
    
    </body>
    <script type="text/javascript">
    var pcount = 12; //每页显示多少条
    var page = 1; //当前页
    
    //加载数据
    loadData();
    //加载分页列表
    loadPageList();
    
    //查询
    $("#btn").click(function(){
    	page = 1;
    	//加载数据
    	loadData();
    	//加载分页列表
    	loadPageList();
    })
    
    //加载数据的函数
    function loadData(){
    	$.ajax({
    		url:"load.php",
    		data:{page:page,pcount:pcount},
    		type:"POST",
    		dataType:"JSON",
    		success: function(data){
    			var str = "";
    			/*for(var i=0;i<data.length;i++){
    				str += "<tr><td>"+data[i].AreaCode+"</td><td>"+data[i].AreaName+"</td><td>"+data[i].ParentAreaCode+"</td></tr>";
    			}*/
    			
    			for(var k in data){
    				str += "<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
    			}
    			
    			$("#nr").html(str);
    		}
    	});
    }
    
    //加载分页列表
    function loadPageList(){
    	var str = "";
    	//加载上一页
    	str += "<li><a id='prev'>«</a></li>";
    	//加载列表
    	
    	//往左找2个  10
    	for(var i=page-2;i<page;i++){
    		var p = i;
    		if(p>0){
    			str += "<li><a class='plist'>"+p+"</a></li>";
    		}
    	}
    	//当前页
    	str += "<li class='active'><a>"+page+"</a></li>";
    	
    	//往右找2个
    	for(var i=page;i<=page+1;i++){
    		var p = i+1;
    		var zys = yeShu();
    		if(p<=zys){
    			str += "<li><a class='plist'>"+p+"</a></li>";
    		}
    	}
    	//加载下一页
    	str += "<li><a id='next'>»</a></li>";
    	
    	$("#pagelist").html(str);
    	
    	//给分页列表加事件
    	jiaShiJian();
    }
    
    
    //获取总页数的方法
    function yeShu(){
    	var ts = 0; //总条数
    	$.ajax({
    		async:false,
    		type:"POST",
    		url:"shuliang.php",
    		dataType:"TEXT",
    		success: function(data){
    			ts = data;
    		}
    	});
    	
    	var zys = Math.ceil(ts/pcount);
    	return zys;
    }
    
    //给分页列表加事件的方法
    function jiaShiJian(){
    	//给上一页加事件
    	$("#prev").click(function(){
    		//当前页减一
    		if(page>1){
    			page--;
    			//重新加载数据
    			loadData();
    			//重新加载分页列表
    			loadPageList();
    		}else{
    			alert("当前已经是第一页了!");
    		}
    	})
    	//给下一页加事件
    	$("#next").click(function(){
    		//当前页加一
    		var zsy = yeShu();
    		if(page<zsy){
    			page++;
    			//重新加载数据
    			loadData();
    			//重新加载分页列表
    			loadPageList();
    		}else{
    			alert("当前已经是最后一页了!");
    		}
    	})
    	//给中间的列表加事件
    	$(".plist").click(function(){
    		//换当前页
    		page = parseInt($(this).text());
    		//重新加载数据
    		loadData();
    		//重新加载分页列表
    		loadPageList();
    	})
    }
    
    </script>
    </html>
    

     分页查询页

    <?php
    require_once "DBDA.class.php";
    $db = new DBDA();
    $page = $_POST["page"];
    $pcount = $_POST["pcount"];
    $tg = ($page-1)*$pcount;
    
    $sql = "select * from chinastates  limit {$tg},{$pcount}";
    
    echo $db->jsonquery($sql);
    

     查询数据表中数据

    <?php
    require_once "DBDA.class.php";
    $db = new DBDA();
    $sql = "select count(*) from chinastates";
    echo $db->strquery($sql)
    

     DBDA页

    <?php
    class DBDA{
    	public $host="localhost"; //服务器地址
    	public $uid="root"; //用户名
    	public $pwd="123"; //密码
    	public $dbname="crud"; //数据库名称
    	
    	/*
    		执行一条SQL语句的方法
    		@param sql 要执行的SQL语句
    		@param type SQL语句的类型,0代表查询 1代表增删改
    		@return 如果是查询语句返回二维数组,如果是增删改返回true或false
    	*/
    	public function query($sql,$type=0){
    		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
    		$result = $db->query($sql);
    		if($type){
    			return $result;
    		}else{
    			return $result->fetch_all();
    		}
    	}
    	public function strquery($sql,$type=0){
    		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
    		$result = $db->query($sql);
    		if($type){
    			return $result;
    			}else{
    				$arr = $result->fetch_all();
    				$str = "";
    				foreach($arr as $v){
    					$str .= implode("^",$v)."|";
    					}
    				$str = substr($str,0,strlen($str)-1);
    				return $str;
    				}
    		}
    	//返回json数据的方法
    	public function jsonquery($sql,$type=0){
    		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
    		$result = $db->query($sql);
    		if($type){
    			return $result;
    		}else{
    			$arr = $result->fetch_all(MYSQLI_ASSOC);//关联数组
    			return json_encode($arr);//转换json
    			//json_decode()分解json
    		}
    	}
    }
    

     

  • 相关阅读:
    [置顶] 一个懦弱的IT人
    Android ListView的理解(一)
    不允许调用库函数,也不允许使用任何全局或局部变量编写strlen函数
    http-使用get和post方式提交数据
    ILOG的一个基本应用——解决运输问题、转运问题
    原生js获取execl里面的值 主要使用ActiveXObject
    (顺序表的应用5.4.2)POJ 1591 M*A*S*H(约瑟夫环问题的变形——变换步长值)
    HDU 3032 Nim or not Nim? (sg函数)
    Hadoop入门实践之从WordCount程序说起
    仅复制备份(简单恢复模式)
  • 原文地址:https://www.cnblogs.com/navyouth/p/8889016.html
Copyright © 2011-2022 走看看