admin 管理员组

文章数量: 1086846

ajax实现分页操作

利用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);}}}
}

点击事件中，主要修改选中的样式，以及鼠标划过的样式，以及数据的修改。

本文标签： ajax实现分页操作

版权声明：本文标题：ajax实现分页操作 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687693370a129990.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。