list分页的三种数据渲染做法（ajax技术）
转载自：https://blog.csdn.net/weixin_43845137/article/details/104953500
分页效果主要分为三种：
1：生成页码，点击可以切换到对应的页码
2：懒加载，点击加载更多，加载下一页
3：滚动到底部就自动加载下一页第一种：生成页码，点击可以切换到对应的页码
（一）：01:的list页的数据渲染
主要功能是:
- 获取第一页的内容渲染到页面
- 根据总条数和每页显示的条数，计算总页数，生成页码
- 点击页面，能够按需加载下一页的数据
- 升序降序：按照价格来
00：先引入连接数据库的ajax的封装函数js
// 封装ajax 方案2
function ajax2(opt) {
function extend(obj1, obj2) {
for (var key in obj2) {
obj1[key] = obj2[key];
}
}
//默认参数
var defaults = {
async: true
}
//后面是有默认参数
extend(defaults, opt);
var xhr = new XMLHttpRequest();
if (defaults.type.toLowerCase() == 'get') {
//get请求
if (defaults.data) {
defaults.url += '?' + defaults.data;
}
xhr.open(defaults.type, defaults.url, defaults.async);
xhr.send(null);
} else {
//post请求
xhr.open(defaults.type, defaults.url, defaults.async);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(defaults.data);
}
//返回接受的数据
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (defaults.success) { //如果有数据就返回
defaults.success(xhr.responseText);
}
} else {
alert('错误http状态码:' + xhr.status);
}
}
}
}(function () {
let list = document.getElementById('list'); //整个list的页面
let pages = document.getElementById('pages'); //pages下面的总页数
let btn = document.getElementById('btn'); //升降序的按钮
let iPages = 1; //第一页的数据(页的数据)
let num = 10; //每一页为10条数据
let paixu = ""; //排序，默认是没有排序的
// 初始化 获取第一页的内容渲染到页面
function init() {
ajax2({
type: 'get',
url: 'api/010.getdata.php',
data: 'page=' + iPages + '&num=' + num + '&paixu=' + paixu,
success: function (str) {
// console.log(str);
let arr = JSON.parse(str);
// console.log(arr);
let html = arr.data.map((item, index) => {
return `<li data-id="${item.gid}">
<p class="title">${index + 1}.${item.title}</p>
<p class="price">${item.price}</p>
</li>`;
}).join("");
list.innerHTML = html; //数据渲染到页面
// 2：根据总条数和每页显示的条数，计算总页数，生成页码 (32条，然后一页10条数据，需要失业，所以要向上取整)
let pagesNum = Math.ceil(arr.pages / arr.num);
// console.log(pagesNum);
let str2 = '';
for (i = 0; i < pagesNum; i++) {
str2 += `<a href="#">${i + 1}</a>`;
}
pages.innerHTML = str2;
pages.children[iPages - 1].className = 'active'; //第一页高亮
}
});
}
init();
// 3：点击页面，能够按需加载下一页的数据 (事件委托给pages)
pages.onclick = ev => {
if (ev.target.tagName.toLowerCase() == 'a') {
iPages = ev.target.innerHTML; //页数的数据渲染
init(); //调取新的数据渲染到页面
}
}
// 4：升序降序：按照价格来
btn.onclick = function () {
if (this.value == '升序') {
//升序
paixu = 'asc';
this.value = '降序';
} else {
//降序
paixu = 'desc';
this.value = '升序';
}
init();
}
})();二、01的接口
00：需要先引入连接数据库的公共接口 08conn.php
<?php
header('Content-type:text/html;charset=utf-8');//这是防止中文乱码
//文件名不能写con，因为con是系统文件
// 链接数据库 默认的主机名：localhost或者http://127.0.01
$severname = 'localhost';
$username = 'root';
$pwd = '';
$dbname = 'h51905';
//通过构造函数 mysqli()建立链接
$conn = new mysqli($severname,$username,$pwd,$dbname);
// //php调用对象属性或者方法用的是 -> $conn->connect_error
if($conn->connect_error){
die('错误提示:' .$conn->connect_error);
}
// echo '连接成功';
?>
01：010.getdata.php
<?php
//接受前端的数据，帮前端查询第几页的数据
$page = isset($_GET['page']) ? $_GET['page'] : "";//页数，那一页
$num = isset($_GET['num']) ? $_GET['num'] : "";//一夜数据有10条
$paixu = isset($_GET['paixu']) ? $_GET['paixu'] : "";//排序
// echo $page,$num;
include '08conn.php';//链接数据库
//需求：传递过来的page=1，num=10，：查询第一页数据给前端，一夜数据有10条
// SELECT * FROM useinf LIMIT 下标,条数 ;
// page：那一页 num：每页条数 index(下标)
// 1 10 0
// 2 10 10 。。。。
// 公式： index = (page - 1) * num;
$index = ($page - 1) * $num;
$sql = "SELECT * FROM goodlist1 ORDER BY price $paixu LIMIT $index,10";
$res = $conn->query($sql);//
// SELECT * FROM goodlist1 ORDER BY price DESC LIMIT 0,10;//降序
// var_dump($res);//这边测试在api里面测试
//得到结果集里面的内容 num_row //得到数组
$connect = $res->fetch_all(MYSQLI_ASSOC);
//把数据传给前端,先把数据转为字符串
// echo json_encode($connect,JSON_UNESCAPED_UNICODE);//防止中文转意
//查询总条数
$sql2 = "SELECT * FROM goodlist1";
// 执行sql2语句
$res2 = $conn->query($sql2);
// var_dump($res2);
// 一个页面不用出现两个echo，否则前端数据不好处理
$data = array(
"data" => $connect,//这是10条数据
"pages" => $res2->num_rows,//这是总的条数
"page" => $page,//第几页
"num" => $num//每一页的数据条数
);
//把数据传给前端,先把数据转为字符串
echo json_encode($data,JSON_UNESCAPED_UNICODE);//防止中文转意
//最后关闭连接
$res->close();//关闭结果集
$conn->close();//关闭数据库
?>第二种：懒加载，点击加载更多，加载下一页
<h2>分页效果</h2>
<ul id="list">
<!-- <li data-id="1">
<p class="title">标题</p>
<p class="price">价格</p>
</li> -->
</ul>
<p id="pages">
点击加载更多
</p>
先引入连接数据库的文件
<script src="./common.js"></script>
JS
(function () {
/*懒加载样式一：点击一次更多，就加载下一页
1： 渲染第一页的数据
2： 如果总页数超过2页， 便显示‘ 加载更多’
3： 点击加载更多， 就可以加载下一页数据， 拼接到下一页数据下*/
//找节点
let list = document.getElementById('list');
let pages = document.getElementById('pages');
let iPage = 1; //第一页数据
let num = 10; //每一页有10条数据
let allpages = 0; //总页数
// 1： 渲染第一页的数据
function init() { //初始化数据，为了第一次的显示 数据有第一页渲染的数据和数据条数
ajax2({
type: 'get',
url: 'api/012.getdata.php',
data: 'iPage=' + iPage + '&num=' + num,
success: function (str) {
// console.log(str);
let arr = JSON.parse(str);
create(arr.data); //数据渲染
// 判断总共有多少页
allpages = Math.ceil(arr.pages / arr.num);
console.log(allpages);
if (allpages > 1 && iPage != allpages) {
// 2： 如果总页数超过2页， 便显示‘ 加载更多’
pages.style.display = 'block';
} else {
pages.style.display = 'none';
}
// let html = arr.data.map(item => {
// return `<li data-id="${item.gid}">
// <p class="title">${item.title}</p>
// <p class="price">${item.price}</p>
// </li>`;
// }).join('');
// list.innerHTML = html;
}
});
//数据渲染函数
function create(arr) {
let html = arr.map((item, index) => {
return `<li data-id="${item.gid}">
<p class="title">${item.title}</p>
<p class="price">${item.price}</p>
</li>`;
}).join('');
list.innerHTML += html; //数据渲染 后面旧的数据之间拼接在后面
}
}
init();
// 3： 点击加载更多， 就可以加载下一页数据， 拼接到下一页数据下
pages.onclick = () => {
iPage++;
init();
// if (iPage < allpages) { //当前的显示页数的数据自增1，并且初始化
// init();
// } else {
// //达到最后一页，就隐藏隐藏加载更多
// pages.style.display = 'none';
// }
}
})();<?php
//接受前端的数据，帮前端查询第几页的数据
$page = isset($_GET['iPage']) ? $_GET['iPage'] : "";//页数，那一页
$num = isset($_GET['num']) ? $_GET['num'] : "";//一夜数据有10条
// echo $page,$num;
include '08conn.php';//链接数据库
//需求：传递过来的page=1，num=10，：查询第一页数据给前端，一夜数据有10条
// SELECT * FROM useinf LIMIT 下标,条数 ;
// page：那一页 num：每页条数 index(下标)
// 1 10 0
// 2 10 10 。。。。
// 公式： index = (page - 1) * num;
$index = ($page - 1) * $num;
$sql = "SELECT * FROM goodlist1 LIMIT $index,$num";
$res = $conn->query($sql);//
// SELECT * FROM goodlist1 ORDER BY price DESC LIMIT 0,10;//降序
// var_dump($res);//这边测试在api里面测试
//得到结果集里面的内容 num_row //得到数组
$connect =$res->fetch_all(MYSQLI_ASSOC);
//把数据传给前端,先把数据转为字符串
// echo json_encode($connect,JSON_UNESCAPED_UNICODE);//防止中文转意
//查询总条数
$sql2 = "SELECT * FROM goodlist1";
// 执行sql2语句
$res2 = $conn->query($sql2);
// var_dump($res2);
// 一个页面不用出现两个echo，否则前端数据不好处理
$data = array(
"data" => $connect,//这是10条数据
"pages" => $res2->num_rows,//这是总的条数
"page" => $page,//第几页
"num" => $num//每一页的数据条数
);
//把数据传给前端,先把数据转为字符串
echo json_encode($data,JSON_UNESCAPED_UNICODE);//防止中文转意
//最后关闭连接
// $res->close();//关闭结果集
// $conn->close();//关闭数据库
?>第三种：懒加载-滚动到底部就自动加载下一页
<h2>分页效果</h2>
<ul id="list">
<!-- <li data-id="1">
<p class="title">标题</p>
<p class="price">价格</p>
</li> -->
</ul>
<p id="loading">
<img src="./images/loading.gif" alt="">
</p>
JS：
<script src="./common.js"></script>
<script>
(function () {
/*懒加载样式二：滚动加载更新的数据
1： 渲染第一页的数据
2： 滚动到临界点就加载下一页， 拼接到下一页数据下
到达临界点之后，马上出现loading图片，
两秒后，图片隐藏，数据显示
*/
//找节点
let list = document.getElementById('list'); //list列表页
let pages = document.getElementById('pages'); //页数
let loading = document.getElementById('loading'); //loading动图
let iPage = 1; //第一页数据（需要被渲染的数据页面，最开始为1，便是第一页）
let num = 15; //每一页有10条数据
let allpages = 0; //总页数，设置为全局变量
// 1： 渲染第一页的数据
function init() { //初始化数据，为了第一次的显示
ajax2({
type: 'get',
url: 'api/012.getdata.php',
data: 'iPage=' + iPage + '&num=' + num,
success: function (str) {
// console.log(str);
let arr = JSON.parse(str);
create(arr.data); //数据渲染
// 判断总共有多少页
// allpages = Math.ceil(arr.pages / arr.num);
}
});
//数据渲染函数
function create(arr) {
let html = arr.map((item, index) => {
return `<li data-id="${item.gid}">
<p class="title">${item.title}</p>
<p class="price">${item.price}</p>
</li>`;
}).join('');
list.innerHTML += html; //数据渲染 后面旧的数据之间拼接在后面
isok = true; //当数据完全渲染后，就开启开关，接着渲染下一页的数据
}
}
init();
// 滚动加载新数据
let isok = true; //开关，第一次为true，为了到达临界点显示动图loading
document.onscroll = () => {
let scrollTop = window.scrollY; //滚动的距离（可视区距离顶部的距离）
//临界点：= //list距离文档的高度 - 可视区的高度
let iH = list.offsetTop + list.offsetHeight - window.innerHeight;
if (scrollTop >= iH) {
// alert('到达临界点，加载新数据');
//到达临界点之后，马上出现loading图片，
// 两秒后，图片隐藏，数据显示
if (iPage == allpages) { //iPage就是要渲染的页面的第几页
//滚动到最后一页的时候，隐藏
loading.style.display = 'none';
} else {
//还未到达最后一页，还可以加载数据
if (isok) {
isok = false; //关闭开关
iPage++;
loading.style.display = 'block';
setTimeout(function () {
loading.style.display = 'none';
init(); //调用初始化函数，渲染新数据
}, 2000);
}
}
}
}
})();
</script>
微信
支付宝本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。