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实现分页操作相关推荐

php ajax mysql 分页查询_PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
1.首先做主页面Ajax_pag.php 代码如下: Ajax做分页 .header{ margin-top: 20px; } 关键字: 地区代号地区名称父级代号 2.然后做分页查询JS页面Ajax_ ...
php ajax mysql 分页查询_基于PHP_MySql_Ajax的分页技术方案
一.引言 Ajax的全称是AsynchronousJavaScriptAndXML(异步JavaScript和XML),它不是一项新技术,而是很多成熟的技术的集合. 和Applet,Flash相比,A ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...
使用pagination分页插件实现Ajax动态分页
pagination插件下载地址:https://pan.baidu.com/s/1c3QQ7XQ 一.前言做的一个列表页要将所有结果显示出来,太多记录不能一次性显示,所以要进行分页.一开始尝试自己 ...
java如何写ajax,java,jq,ajax写分页
1.先写好html基础样式我懒得去写css样式233,能看就行 #page { width: 20px; } id name pwd age 上一页下一页 2.编写servlet 2.1 先写查询 ...
JavaWEB（AJAX实现分页）
4.2 使用AJAX实现分页 4.2.1 需求需要将分页数据通过ajax的方式进行分页,实现只变更部分数据的功能. 4.2.2 实现原理 1.设置Servlet的response的格式为applic ...
php ajax实现查询功能,ajax实现分页查询功能
这次给大家带来ajax实现分页查询功能,ajax实现分页查询功能的注意事项有哪些,下面就是实战案例,一起来看一下. ajax分页查询功能的具体代码,供大家参考,具体内容如下显示的效果如下: 实现效果 ...
php ajax实现分页效果
ajaxpage.php[这里是数据展示页面的代码]: <meta charset='utf-8′> <script src=" http://ajax.googleapi ...
适合千万数据查询分页操作的一个通用存储过程
适合千万数据查询分页操作的一个通用存储过程一.引言最近上班比较忙,所以就很少写东西了,MongoDB系列的文章也要拖后了,没办法,工作第一,没工作就没饭吃了.今天正好 ...

ajax实现分页操作

ajax实现分页操作相关推荐

最新文章

热门文章