ajax实现分页操作

article/2025/10/20 9:33:59

利用ajax请求数据的特点，来实现分页操作。

在这里插入图片描述
主要是利用ajax进行后端分页，当点击对应的页数，ajax请求数据库对应的数据，后端分页可以降低前端请求数据的压力，页面渲染起来比较流畅。
根据后台请求的数据，来创建页码，给每个页码添加点击事件。

//分别传入数据库中总条数，父元素，当前页码（后台返回）function creatUl(number, parent, pages) {var ul = document.createElement("ul");var li = document.createElement("li");li.textContent = "上一页";li.setAttribute("data-main", "pre");ul.appendChild(li);for (var i = 1; i <= Math.ceil(number / 8); i++) {//页面中展示的条数var li = document.createElement("li");li.textContent = i;li.addEventListener("mouseover", clickHandler);li.addEventListener("mouseleave", clickHandler);ul.appendChild(li);}var li = document.createElement("li");li.textContent = "下一页";li.setAttribute("data-main", "next");ul.appendChild(li);// ul.firstElementChild.setAttribute("class","focus");Array.from(ul.children)[pages + 1].setAttribute("class", "focus");ul.addEventListener("click", clickHandler);parent.appendChild(ul);}

点击事件以及移动事件

function clickHandler(e) {if (e.target.nodeName === "LI") {var liList = Array.from(this.children);liList.pop();liList.shift();if (!e.target.getAttribute("data-main")) {if (e.type === "click") {if (e.target.getAttribute("class").indexOf("focus") >= 0) return;for (let i = 0; i < liList.length; i++) {liList[i].setAttribute("class", "");}e.target.setAttribute("class", "focus");var options = {path: "http://localhost:8080/0627/goodList.php",data: {frist: (e.target.textContent - 1) * 8,},successFn: createTd,};Utils.ajax(options);} else {var liList = Array.from(this.parentElement.children);if (e.type === "mouseover") {if (!e.target.getAttribute("class") ||e.target.getAttribute("class").indexOf("focus") < 0) {e.target.setAttribute("class", "hover");}} else {for (var i = 0; i < liList.length; i++) {if (liList[i].getAttribute("class")) {if (liList[i].getAttribute("class").indexOf("focus") < 0)liList[i].setAttribute("class", "");}}}}}else{for(let i =0;i<liList.length;i++){if(liList[i].getAttribute("class") && liList[i].getAttribute("class").indexOf("focus")>=0){var index = i;}}if(e.target.getAttribute("data-main") === "pre"){if(index === 0) return;var options = {path: "http://localhost:8080/0627/goodList.php",data: {frist: (index-1) * 8,},successFn: createTd,};Utils.ajax(options);}else{if(index === liList.length-1) return;var options = {path: "http://localhost:8080/0627/goodList.php",data: {frist: (index+1) * 8,},successFn: createTd,};Utils.ajax(options);}}}
}