重新渲染ajax中的list,list分页的三种数据渲染做法（ajax技术）

目录

分页效果主要分为三种：

第一种：生成页码，点击可以切换到对应的页码

(一)：01:的list页的数据渲染

二、01的接口

第二种：懒加载，点击加载更多，加载下一页

第三种：懒加载-滚动到底部就自动加载下一页

分页效果主要分为三种：

1：生成页码，点击可以切换到对应的页码

2：懒加载，点击加载更多，加载下一页

3：滚动到底部就自动加载下一页

第一种：生成页码，点击可以切换到对应的页码

(一)：01:的list页的数据渲染

主要功能是;

1：获取第一页的内容渲染到页面

2：根据总条数和每页显示的条数，计算总页数，生成页码

3：点击页面，能够按需加载下一页的数据

4：升序降序：按照价格来

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 `

${index + 1}.${item.title}

${item.price}`;

}).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 += `${i + 1}`;

}

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

$conn->connect_error

if($conn->connect_error){

die('错误提示:' .$conn->connect_error);

}

// echo '连接成功';

?>

01：010.getdata.php

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();//关闭数据库

?>

第二种：懒加载，点击加载更多，加载下一页

分页效果

点击加载更多

先引入连接数据库的文件

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 `

//

${item.title}

//

${item.price}

//`;

// }).join('');

// list.innerHTML = html;

}

});

//数据渲染函数

function create(arr) {

let html = arr.map((item, index) => {

return `

${item.title}

${item.price}`;

}).join('');

list.innerHTML += html; //数据渲染 后面旧的数据之间拼接在后面

}

}

init();

// 3： 点击加载更多， 就可以加载下一页数据， 拼接到下一页数据下

pages.onclick = () => {

iPage++;

init();

// if (iPage < allpages) { //当前的显示页数的数据自增1，并且初始化

// init();

// } else {

// //达到最后一页，就隐藏隐藏加载更多

// pages.style.display = 'none';

// }

}

})();

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();//关闭数据库

?>

第三种：懒加载-滚动到底部就自动加载下一页

分页效果

JS：