ajax分页

最新推荐文章于 2025-09-12 13:16:34 发布

weixin_34051201

最新推荐文章于 2025-09-12 13:16:34 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

文章标签： php json xhtml

原文链接：http://www.cnblogs.com/navyouth/p/8889016.html

主页

<!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="width: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
		}
	}
}