版权声明： https://blog.csdn.net/l269798518/article/details/80555380
数据库创建以及测试数据插入示例：
create table goods(
goods_id int unsigned not null primary key auto_increment,
goods_name varchar(32) not null,
market_price float not null
);
insert into goods values(null, '测试1', 32.43);
insert into goods values(null, '测试2', 32.43);
insert into goods values(null, '测试3', 32.43);
insert into goods values(null, '测试4', 32.43);
insert into goods values(null, '测试5', 32.43);
insert into goods values(null, '测试6', 32.43);
insert into goods values(null, '测试7', 32.43);
insert into goods values(null, '测试8', 32.43);
insert into goods values(null, '测试9', 32.43);
insert into goods values(null, '测试10', 32.43);
insert into goods values(null, '测试11', 32.43);
insert into goods values(null, '测试12', 32.43);
insert into goods values(null, '测试13', 32.43);
insert into goods values(null, '测试14', 32.43);
insert into goods values(null, '测试15', 32.43);
insert into goods values(null, '测试16', 32.43);
insert into goods values(null, '测试17', 32.43);分页类的实现：
class page
{
private $total; //总记录数
private $size; //每页记录数
private $url; //URL地址
private $page; //当前页码
// 构造方法
function __construct($total, $size, $url='')
{
# 计算页数，向上取整
$this->total = ceil($total / $size);
// 每页记录数
$this->size = $size;
// 为URL添加GET参数
$this->url = $this->setUrl($url);
// 获得当前页码
$this->page = $this->getNowPage();
}
// 获得当前页码
private function getNowPage() {
$page = empty($_GET['page']) ? 1 : $_GET['page'];
if ($page < 1) {
$page = 1;
} elseif($page > $this->total) {
$page = $this->total;
}
return $page;
}
// 为URL添加GET参数，去掉page参数
private function setUrl($url) {
$url .='?';
foreach ($_GET as $k => $v) {
if($k != 'page'){
$url.="$k=$v&";
}
}
return $url;
}
// 获得分页导航链接
public function getPageList() {
// 总页数不超过1时直接返回空结果
if ($this->total <= 1) {
return '';
}
// 拼接分页导航的HTML
$html = '';
if ($this->page > 4) {
$html = "<a href=\"#\" onclick=\"getGoods('{$this->url}page=1')\">1</a> ... ";
}
for ($i=$this->page-3, $len=$this->page+3; $i < $len && $i <= $this->total; $i++) {
if ($i > 0) {
if ($i == $this->page) {
$html .= "<a href=\"#\" onclick=\"getGoods('{$this->url}page=$i')\" class=\"curr\">$i</a> ";
} else {
$html .= "<a href=\"#\" onclick=\"getGoods('{$this->url}page=$i')\">$i</a> ";
}
}
}
if ($this->page+3 < $this->total) {
$html .= "...<a href=\"#\" onclick=\"getGoods('{$this->url}page=$this->total')\">$this->total</a> ";
}
return $html;
}
// 获得SQL中的limit
public function getLimit() {
if ($this->total == 0) {
return '0,0';
}
return ($this->page - 1) * $this->size . ", {$this->size}";
}
}数据库连接查询data.php
<?php
header('Content-type:text/html; charset=utf-8');
// 引入分页类
require('./page.class.php');
// 使用PDO连接数据库
try {
$pdo = new PDO("mysql:dbname=shop;charset=utf8", "root", "root");
// 设置字符集编码
$pdo->query("set names utf8");
// SQL预处理语句
$stmt1 = $pdo->query("select count(*) from goods");
// 实例化分页类对象
$total = $stmt1->fetchColumn();
$per = 3;
$page = new page($total, $per, './data.php');
$stmt = $pdo->prepare("select goods_id,goods_name,market_price from goods limit ".$page->getLimit());
// 获得页码列表信息
$pagelist = $page->getPageList();
// 执行SQl语句
$stmt->execute();
} catch(Exception $e) {
echo $e->getMessage()."<br>";
}
// 查询结果
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
$data[] = $pagelist; //将分页信息追加到$data数组中
// 输出页面
echo json_encode($data);
?>主页面：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<script type="text/javascript">
function getGoods(url) {
// 通过Ajax对象获得分页信息
var obj = new XMLHttpRequest();
// 感知Ajax状态
obj.onreadystatechange = function() {
if (obj.status == 200 && obj.readyState == 4) {
// 接收服务器端的响应信息
eval("var info = " + obj.responseText);
// 拼接输出的字符串
var dataList = "<tr><td>ID</td><td>名称</td><td>价格</td></tr>";
for (var i = 0; i < info.length - 1; i++) {
dataList += "<tr><td>" + info[i].goods_id + "</td>";
dataList += "<td>" + info[i].goods_name + "</td>";
dataList += "<td>" + info[i].market_price + "</td></tr>";
}
dataList += "<tr><td colspan=3>" + info[info.length - 1] + "</td></tr>";
// 将字符串写入网页
document.getElementById("result").innerHTML = dataList;
}
}
obj.open("get", url);
obj.send();
}
window.onload = function() {
getGoods('./data.php');
}
</script>
<style type="text/css">
table {
width: 600px;
}
tr {
height: 30px;
}
td {
width: 200px;
text-align: center;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>Ajax实现商品列表无刷新分页</h2>
<table border="1" id="result" align="center"></table>
<div id="bottom" align="center"></div>
</body>
<script type="text/javascript">
// 获取一个随机数，用于判断无刷新分页效果,正常情况切换页数时随机数不变
var num = "随机数值： ";
num += Math.ceil(Math.random()*10);
// 将随机数字符串写入网页
document.getElementById('bottom').innerHTML = num;
</script>
</html>
