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

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