get_mov.php代码
实例
<?php
$dsn='mysql:host=127.0.0.1;dbname=xuexi;charset=utf8;port=3306';
$dbname='root';
$password='root';
try{
$pdo=new PDO($dsn,$dbname,$password);
}catch(PDOException $e){
print_r($e->getFile());
exit;
}
//print_r($pdo);
//返回总页数
$sql='SELECT `mov_id` FROM `movies`';
$stmt=$pdo->prepare($sql);
$stmt->execute();
$movies=$stmt->fetchAll(PDO::FETCH_ASSOC);
$num=5;
$pages=CEIL(count($movies)/$num);
//返回每页的数据
$page=$_GET['p'];
$offset=($page-1)*$num;
$sql="SELECT `mov_id`,`mov_name`,`detail` FROM `movies` LIMIT {$offset},{$num}";
$stmt=$pdo->prepare($sql);
$stmt->execute();
$movies=$stmt->fetchAll(PDO::FETCH_ASSOC);
//print_r($movies);
//转换为JSON数据对象
echo json_encode([$pages,$movies]);
?>运行实例 »
点击 "运行实例" 按钮查看在线实例
show.php代码
实例
<?php
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>分页技术</title>
</head>
<style>
.clear{clear:both;}
table{border-collapse: collapse;width: 50%;margin:50px auto;text-align: center;}
thead{font-weight: bold;}
td{border:1px solid #ccc;}
ul{width: 50%;margin:0 auto;}
li{list-style: none;float:left;width: 20px;font-size: 16px;cursor: pointer;}
</style>
<body>
<table>
<thead>
<tr>
<td style="width:20%">编码</td>
<td style="width: 30%">名称</td>
<td style="width: 50%">介绍</td>
</tr>
</thead>
<tbody></tbody>
</table>
<ul>
<div class="clear"></div>
</ul>
<script>
var tbody=document.getElementsByTagName('tbody')[0];
// console.log(tbody);
var request=new XMLHttpRequest();
request.open('GET','get_mov.php?p=<?=$_GET["p"]?:1;?>',true);
request.send(null);
request.onreadystatechange=function(){
if(request.readyState===4){
//代入数据
var date=JSON.parse(request.responseText);
console.log(date);
date[1].forEach(function (value) {
console.log(value);
var tr=document.createElement("tr");
for(var key in value){
var td=document.createElement("td");
td.innerText=value[key];
tr.appendChild(td);
}
tbody.appendChild(tr);
});
//分页
var ul=document.getElementsByTagName('ul')[0];
for(var i=0;i<date[0];i++){
var li=document.createElement('li');
li.innerText=i+1;
li.onclick=function(){
var search = location.search.slice(0,3) + this.innerText;
location.replace(search);
};
ul.appendChild(li);
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例