AJAX + PHP + MYSQL 实现无刷新分页

最新推荐文章于 2021-09-07 20:24:10 发布

viser123

最新推荐文章于 2021-09-07 20:24:10 发布

阅读量730

点赞数

分类专栏： Jquery PHP Mysql 文章标签： jquery php mysql ajax

本文链接：https://blog.csdn.net/viser123/article/details/51220418

版权

Jquery 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

PHP

4 篇文章 0 订阅

订阅专栏

Mysql

2 篇文章 0 订阅

订阅专栏

html 页面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP实现分页</title>
<script src="jquery-1.11.3.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.box {
width: 1000px;
height: 320px;
margin: 5% auto;
}

.box img {
margin: 0 5px;
display: inline-block;
border: 1px solid #aaaaaa;
padding: 2px;
}

#paging {
width: 400px;
margin: -20px auto;
}

#paging span {
margin: 0 3px;
}
</style>
</head>
<body>
<div class="box">
</div>
<div id="paging">
</div>
<script>
var cur_page = 0;//当前页
var total_size,//总数
page_size,//每页显示数据
total_page;//总页数
//拿到数据
function getdata(page) {
$.ajax({
type: "POST",
url: "index.php",
dataType: "json",
data: {"page_num": page - 1},
success: function (data) {
var len = data.pages.length;
var str = "";
total_size = data.total;
page_size = data.page_size;
total_page = data.total_page;
cur_page = page;
for (var i = 0; i < len; i++) {
str += '<img src="' + data.pages[i].url + '" alt="图片暂时无法显示">';
}
$(".box").empty().append(str);
},
complete: function () { //生成分页条
getpaging();
},
error: function (xhr, type, error) {
console.log("错误")
}
})
}

//得到分页条
function getpaging() {
var paging_str = "";
if (cur_page == total_page) {
paging_str += "<span>共" + total_page + "页</span>" +
"<span>第" + cur_page + "/" + total_page + "页</span>" +
"<span><a href='javascript:void(0)' rel='1'>首页</a></span>" +
"<span><a href='javascript:void(0)' rel='" + (cur_page - 1) + "'>上一页</a></span>" +
"<span>下一页</span>" +
"<span>尾页</span>";
}
else if (cur_page == 1) {
paging_str += "<span>共" + total_page + "页</span>" +
"<span>第" + cur_page + "/" + total_page + "页</span>" +
"<span>首页</span>" +
"<span>上一页</span>" +
"<span><a href='javascript:void(0)' rel='" + (cur_page + 1) + "'>下一页</a></span>" +
"<span><a href='javascript:void(0)' rel='" + total_page + "' >尾页</a></span>";
}
else if (cur_page < 1) {
cur_page = 1;
paging_str = "<span>共" + total_page + "页</span>"
}
//大于1
else {
paging_str += "<span>共" + total_page + "页</span>" +
"<span>第" + cur_page + "/" + total_page + "页</span>" +
"<span><a href='javascript:void(0)' rel='1'>首页</a></span>" +
"<span><a href='javascript:void(0)' rel='" + (cur_page - 1) + "'>上一页</a></span>" +
"<span><a href='javascript:void(0)' rel='" + (cur_page + 1) + "'>下一页</a></span>" +
"<span><a href='javascript:void(0)' rel='" + total_page + "'>尾页</a></span>";
}
$("#paging").empty().append(paging_str)
}

//初始化和页面链接
$(document).ready(function () {
getdata(1);
$("#paging").delegate("a", "click", function () {
console.log("点击事件有用");
var rel = parseInt($(this).attr("rel"));
if (rel) {
getdata(rel)
}
})
})
</script>
</body>
</html>

PHP文件

<?php
header("Content-type: text/html; charset=utf-8");
$server = "127.0.0.1";
$username = "root";
$password = "";
$db_name = "page_view";
$page = intval($_POST["page_num"]);
//echo $page;
$conn = new mysqli("$server", "$username", "$password", "page_view");

if ($conn->connect_errno) {
echo "失败";
} else {
$total = $conn->query("SELECT count(*) FROM paging");
$total = $total->fetch_row();//取得一行作为数组
$total = $total[0];//拿到总条数
$page_size = 3;//每页显示3条
$total_page = ceil($total/$page_size);//总页数
$start_page = $page* $page_size; //起始页，也就是查询的第一个数字
$sql = "SELECT url FROM paging order by url asc limit $start_page,$page_size";//升序查找
$result = $conn->query($sql);
$data = array();
$data["total"] = $total;
$data["page_size"] = $page_size;
$data["total_page"] = $total_page;
$data["pages"] = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
array_push($data["pages"],array("url"=>$row['url']));
}
echo json_encode($data);
} else {
echo "0";
}
}
$conn->close();

viser123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX + PHP + MYSQL 实现无刷新分页

html 页面： PHP实现分页 * { margin: 0; padding: 0; box-sizing: border-box; } .box { width: 1000
复制链接

扫一扫