今天分享下前两天写的小项目中的一部分效果，就是分页显示效果，这种对于获取后端数据进行分页显示的效果很常见，代码实现也不难，如何实现请听我慢慢道来。
效果图如下
开始之前我们要安装下jQuery封装的分页插件
pagination.js
文件，另外我们需要在html文件中引入两个文件,如下图：
第一个是引入
jQuery
，第二个是引入
jQuery
的分页插件，之后就是js代码和后端php代码了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 正确显示来源于网络的图片 -->
<meta name="referrer" content="never">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/list.css">
</head>
<body>
<div class="page"></div>
<div class="container">
<ul>
</ul>
</div>
<script src="/jquery.min.js"></script>
<script src="../jquery-pagination//jquery.pagination.js"></script>
<script src="../js/list.js"></script>
</body>
</html>
js代码
// 先获取地址栏中信息,了解需要查看的是哪种分类，因为前面get方式获取时后面拼接了这些参数
let str = decodeURIComponent(window.location.search);
// 去掉问号
str = str.substr(1);
const arr = str.split('=');
// 每页显示数据数量
let lineNum = 16;
// 第一次调用
getAjax(1);
// 发送ajax请求从后端获取数据,第一次显示第一页的内容,
// 设定函数用来发送ajax请求,因为要多次请求,所以定义成函数
// 参数是请求的页面,就是一页显示多少就请求多少数据
function getAjax(page) {
$.ajax({
url: '../php/goods_list.php',
// 传入后端的参数
data: {
cat_one_id: arr[1], // 利用id分类找数据
page: page, // 当前页数
line: lineNum, // 每页显示的数据数量
},
type: 'get',
dataType: 'json',
// 接收到响应体后执行的程序
success: function (res) {
// console.log(res);
let str = "";
res.forEach(function (item) {
str += `<li class="list-item">
<div class="panel panel-primary">
<div class="panel-body">
<ol class="breadcrumb">
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >${item.cat_one_id}</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >${item.cat_two_id}</a></li>
<li class="active">${item.cat_three_id}</li>
</ol>
</div>
<div class="panel-footer">
<div class="row">
<div>
<div class="thumbnail">
<img src="${item.goods_big_logo}"
alt="...">
<div class="caption">
<h3>${item.goods_name}</h3>
<p>
<i class="glyphicon glyphicon-yen"></i>
<span>${item.goods_price}</span>
</p>
<p><a href="javascript:;" target="_blank" rel="external nofollow" class="btn btn-primary" role="button">查找相似商品</a> <a
href="../pagess/detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`;
})
$('ul').html(str);
// 数据太多要先分页显示,这里利用插件分页,设定分页样式
// 根据查询结果进行分页显示
// 一页至少有一个res[0]数据,存储的有页面信息(当前页数,总共数据数量,)
$('.page').pagination({
mode: 'fixed',
pageCount: res[0].sumPage,
totalData: res[0].row,
current: res[0].page,
showData: lineNum, // 每页显示的数量
activeCls: 'active', // 给点击的页数按钮添加样式，就是个类名
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页',
// 插件定义的函数
callback: function (res) {
// 获取点击分页的当前页数
let p = res.getCurrent();
// 上面得到的当前页就是请求函数的参数,继续发送请求
getAjax(p);
}
});
}
});
}
php代码
<?php
// 这个是单独在一个文件里写的连接数据库需要的配置信息，写在一个文件里容易修改
include_once './config.php';
// 根据前端的传参,来执行数据库查询操作
// 将查询结果的数组,以json串的形式返回给前端
// 接收参数
$cat_one_id = $_GET['cat_one_id'];
$page = $_GET['page'];
$line = $_GET['line'];
$startLine = ($page - 1) * $line;
// 链接数据库,执行查询语句
// 通过当前需要显示的页数,和每页的数据数量,可以计算起始数据的索引下标
// (当前页-1) * 每页的数据数量
$link = mysqli_connect($host, $user, $pwd, $dbname, $port);
// 分页查询部分
// 执行时的数据是前端传参的数据,从下标startLine开始,每次找line个
$sql = "SELECT * FROM `goods` WHERE `cat_one_id` = '{$cat_one_id}' LIMIT {$startLine} , {$line} ";
$result = mysqli_query($link, $sql);
$arr = mysqli_fetch_all($result, MYSQLI_ASSOC);
// 需要PHP程序反馈查询信息给前端内容
// 查询所有的匹配的数据数量
// 将count(*)的结果以num别名显示出来，就像你的小名一样
$sqlAll = "SELECT COUNT(*) as `num` FROM `goods` WHERE `cat_one_id` = '{$cat_one_id}' ";
// 返回所有符合添加的结果
$stmtAll = mysqli_query($link, $sqlAll);
// 取出关联数组的一行
$numArr = mysqli_fetch_assoc($stmtAll);
// 找到计算的总数量
$row = $numArr['num'];
// 根据数据总量和每页的数据数量,可以计算总页数
// 总页数 = 总数量 / 每页的数据数量 向上取整
$sumPage = ceil($row / $line);
// 给查到的所有结果添加属性,属性值是查询的数据数量
for($i = 0 ; $i <= count($arr)-1 ; $i++){
$arr[$i]['row'] = $row; // 总数量
$arr[$i]['sumPage'] = $sumPage; // 总页数
$arr[$i]['page'] = $page; // 当前页数
}
// 只有输出前端才会收到数据
echo json_encode($arr);
// 关闭数据库
mysqli_close($link);
js代码和php一起看才能看懂，单独看是不行的。具体思路就是根据前端输入给后端的数据然后在数据库中找到相应的数据，并给每组数据都添加上新的属性输出给前端。然后前端根据返回的数据对应写到页面。
然后就是利用分页插件进行数据请求，首先就是设定分页插件属性，使其显示页数和每页数据数量，最后就是利用分页插件的回调函数得到当前页，也正好是请求数据函数的参数。