AJAX+php实现分页器：分页展示数据

效果图：

.html

<style>*{margin:0px;padding: 0px;}.pagination{width: 800px;height: 40px;border:1px solid red;margin: 20px auto;}table{margin:10px auto;}td,th{text-align: center;padding: 5px;}
</style>

<div class="pagination"></div><table border='1' cellpadding='0' cellspacing='0'><thead><tr><th>序号</th><th>学生ID</th><th>学生姓名</th><th>学生年龄</th><th>学生性别</th><th>学生班级</th><th>学生成绩</th></tr></thead><tbody></tbody></table>

<script src="../pagination.js"></script><script src="../ajax.js"></script><script>//获取操作对象var tbody=document.querySelector("tbody")var pagination=document.querySelector('.pagination')//通过ajax获取数据ajax({url:'./pagination1.php',success:function(dt){//将后台响应过来的字符串转为对象var arr=eval('('+dt+')')//创建分页器对象var o1={pageInfo:{pagenum:1,pagesize:12,totalsize:arr.length,totalpage:Math.ceil(arr.length/12)},textInfo:{first:"首页",prev:"上一页",next:"下一页",last:"尾页"}}//创建分页器实例化对象new Pagination(pagination,o1,(m)=>{//根据页码截取数组中对应的数据//一页12条数据var arr2=arr.slice((m-1)*12,m*12)//创建字符串拼接所有内容var str=''//遍历数组arr2.forEach((item,index)=>{str+=`<tr><td>${index+1}</td><td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td><td>${item.class}</td><td>${item.score}</td></tr>` })//把拼接好的数据渲染到tbody中tbody.innerHTML=str})}})</script>

.php

<?phpheader("content-type:text/html;charset=utf-8");$link=mysqli_connect("localhost","root","","shop2");
//设置编码
mysqli_set_charset($link,"utf8");
//SQL语句
$sql="select * from student";
//结果集
$result=mysqli_query($link,$sql);
//存放所有数据
$arr=[];
//遍历每一条数据
while($row=mysqli_fetch_assoc($result)){array_push($arr,$row);
}//数组转为字符串
echo json_encode($arr);
//关闭
mysqli_close($link);?>

AJAX函数封装

function ajax(obj){//ajax()：方法名//obj：参数集//默认参数var defaultObj={url:'',//请求地址type:'get',//请求方式async:true,//是否异步（表示异步，是默认值）data:'',//请求参数success:function(){},//请求成功的回调函数error:function(){} //请求失败的回调函数}//判断传入的参数中是否有请求地址if(!obj.url){throw new Error("必须书写请求地址")}//把传入的参数替换默认参数for(var attr in obj){//arr：传入的参数集obj里面的每一个参数defaultObj[attr]=obj[attr]}//创建ajax对象var xhr=new XMLHttpRequest()//判断当前defaultObj.data中是否存在内容if(defaultObj.data){//判断请求方式  toUpperCase：转换为大写，因为不确定用户书写的请求方式是大写还是小写，所有最好把传过来的type参数值转换大写if(defaultObj.type.toUpperCase()=="GET"){//配置请求信息xhr.open(defaultObj.type,defaultObj.url+"?"+defaultObj.data,defaultObj.async)//发送请求xhr.send()}else if(defaultObj.type.toUpperCase()=="POST"){//配置请求信息xhr.open(defaultObj.type,defaultObj.url,defaultObj.async)//设置请求头信息 告诉一下服务端我给你的是一个什么样子的数据格式//`application/x-www-form-urlencoded` 表示的数据格式就是 `key=value&key=value`xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")//发送请求xhr.send(defaultObj.data)}}else{//配置请求信息xhr.open(defaultObj.type,defaultObj.url,defaultObj.async)//发送请求xhr.send()}//操作响应结果//监听ajax状态是否结束xhr.onreadystatechange=function(){//判断ajax状态是否结束if(xhr.readyState==4){//判断http请求是否成功if(xhr.status==200){//调用成功的回调函数defaultObj.success(xhr.responseText)}else{//调用失败的回调函数defaultObj.error(xhr.error)}}}
}

分页函数封装

//创建分页器的构造函数
function Pagination(ele,options,cb){//创建实例化属性this.ele=elethis.options=options||{}this.cb=cb||function(){}//创建默认属性this.default={//数据信息pageInfo:{pagenum:1, //当前页pagesize:10,//每页显示的条数totalsize:130,//总条数totalpage:13 //总页数},//文本信息textInfo:{first:"first", //首页prev:"prev", //上一页list:"",  //页码next:"next", //下一页last:"last" //尾页}}this.list=null //存放所有页码//调用入口函数this.init()
}
//创建入口函数
Pagination.prototype.init=function(){//调用替换参数的方法this.replace1()//显示大盒子中的信息this.showBox()//给大盒子对象添加点击事件this.clickBox()
}
//使用传入的参数去替换默认参数
Pagination.prototype.replace1=function(){//判断传入的参数中是否存在pageinfoif(this.options.pageInfo){//使用传入的参数替换默认参数for(let attr in this.options.pageInfo){//把传入的参数赋值给对应默认参数中的指定位置this.default.pageInfo[attr]=this.options.pageInfo[attr]}}if(this.options.textInfo){for(let attr in this.options.textInfo){this.default.textInfo[attr]=this.options.textInfo[attr]}}
}
//把数据信息放在大盒子中
Pagination.prototype.showBox=function(){//清空大盒子中的内容this.ele.innerHTML=''//给大盒子对象设置为弹性盒子setStyle(this.ele,{display: "flex",justifyContent: "center",alignItems: "center"})//显示文本信息this.showText()//显示页码信息this.showP()//给大盒子中设置禁用按钮this.stop1()//显示按钮信息this.showBtn()//调用回调函数this.cb(this.default.pageInfo.pagenum)
}
//创建按钮
Pagination.prototype.showBtn=function(){//创建输入框对象var inp=document.createElement("input")//给输入框添加文本inp.value=this.default.pageInfo.pagenum//给输入框对象设置样式setStyle(inp,{width:"30px",lineHeight:"20px"})//把当前输入框追加到大盒子中this.ele.appendChild(inp)//创建按钮对象var btn=document.createElement("button")//给按钮设置文本btn.innerHTML="GO"//给按钮设置样式setStyle(btn,{width:"30px",lineHeight:"20px"})//把按钮追加到大盒子中this.ele.appendChild(btn)}
//禁用
Pagination.prototype.stop1=function(){//获取当前页码var pagenum=this.default.pageInfo.pagenum//获取最大页码var totalpage=this.default.pageInfo.totalpage//获取大盒子对象中所有的子div对象var divs=this.ele.children//判断当前页是否为第一页if(pagenum==1){divs[0].style.backgroundColor="#666"divs[1].style.backgroundColor="#666"}if(pagenum==totalpage){divs[3].style.backgroundColor="#666"divs[4].style.backgroundColor="#666"}
}
//显示文本信息
Pagination.prototype.showText=function(){//获取默认参数中的文本内容let textInfo=this.default.textInfo//遍历当前对象中的键值对for(var attr in textInfo){//创建div对象var newDiv=document.createElement("div")//给当前div对象添加class属性值newDiv.className=attr//判断当前attr是否等于listif(attr=="list"){this.list=newDiv//给当前页码盒子设置为弹性盒子setStyle(newDiv,{display: "flex",justifyContent: "center",alignItems: "center"})}else{setStyle(newDiv,{border:"1px solid red",margin:"0px 3px",padding:"2px 5px"})//给新的div对象添加文本newDiv.innerHTML=textInfo[attr]}//把新的div对象追加到大盒子中this.ele.appendChild(newDiv)}
}
//显示页码信息
Pagination.prototype.showP=function(){//获取默认参数中的当前页和总页数var pagenum=this.default.pageInfo.pagenumvar totalpage=this.default.pageInfo.totalpage//判断总页数是否小于10if(totalpage<10){//遍历所有页码的数字for(let i=1;i<=totalpage;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}}else{//判断当前页码是多少if(pagenum<5){//前面5个for(let i=1;i<=5;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}//中间三个点var span=document.createElement('span')span.innerHTML="..."//把span标签追加到this.list中this.list.appendChild(span)//最后两个for(let i=totalpage-1;i<=totalpage;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}}else if(pagenum==5){//前面7个for(let i=1;i<=7;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}//中间三个点var span=document.createElement('span')span.innerHTML="..."//把span标签追加到this.list中this.list.appendChild(span)//最后两个for(let i=totalpage-1;i<=totalpage;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}}else if(pagenum>5 && pagenum<totalpage-4){//前面2个for(let i=1;i<=2;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}//中间三个点var span=document.createElement('span')span.innerHTML="..."//把span标签追加到this.list中this.list.appendChild(span)//中间5个for(let i=pagenum-2;i<=pagenum+2;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}//中间三个点var span2=document.createElement('span')span2.innerHTML="..."//把span标签追加到this.list中this.list.appendChild(span2)//最后两个for(let i=totalpage-1;i<=totalpage;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}}else if(pagenum==totalpage-4){//前面2个for(let i=1;i<=2;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}//中间三个点var span=document.createElement('span')span.innerHTML="..."//把span标签追加到this.list中this.list.appendChild(span)//最后7个for(let i=totalpage-6;i<=totalpage;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}}else if(pagenum>totalpage-4){//前面2个for(let i=1;i<=2;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}//中间三个点var span=document.createElement('span')span.innerHTML="..."//把span标签追加到this.list中this.list.appendChild(span)//最后7个for(let i=totalpage-4;i<=totalpage;i++){//创建p标签对象var newP=createP(i,pagenum)//把当前p标签对象追加到list对象中this.list.appendChild(newP)}}}
}
//给大盒子添加点击事件
Pagination.prototype.clickBox=function(){  //给大盒子添加点击事件this.ele.onclick=(e)=>{//获取当前页var pagenum=this.default.pageInfo.pagenum//事件对象兼容var e = e || window.event//获取当前操作对象var target=e.target || e.srcElement//下一页if(target.className=="next" && pagenum!=this.default.pageInfo.totalpage){//改变当前页码this.default.pageInfo.pagenum+=1//重新刷新大盒子中的内容this.showBox()}//上一页if(target.className=="prev" && pagenum!=1){//改变当前页码this.default.pageInfo.pagenum-=1//重新刷新大盒子中的内容this.showBox()}//尾页if(target.className=='last' && pagenum!=this.default.pageInfo.totalpage){//改变当前页码this.default.pageInfo.pagenum=this.default.pageInfo.totalpage//重新刷新大盒子中的内容this.showBox()}//首页if(target.className=="first" && pagenum!=1){//改变当前页码this.default.pageInfo.pagenum=1//重新刷新大盒子中的内容this.showBox()}//点击页码if(target.nodeName=="P" && pagenum!=target.innerHTML){//把当前点击对象的文本获取，并赋值给默认参数this.default.pageInfo.pagenum=parseInt(target.innerHTML)this.showBox()}//点击go按钮if(target.nodeName=="BUTTON" && target.previousElementSibling.value!=pagenum){//把输入框中的value值赋值给到当前页this.default.pageInfo.pagenum=parseInt(target.previousElementSibling.value)this.showBox()}}
}
//创建页码p标签
function createP(m,nn){//创建p标签var p1=document.createElement("p")//给当前p标签添加内容p1.innerHTML=m//给p标签设置样式setStyle(p1,{border:"1px solid red",margin:"0px 3px",padding:"2px 5px"})//判断m是否为当前被选中的页码if(m==nn){setStyle(p1,{backgroundColor:"#ccc"})}return p1
}
//给当前元素设置样式
function setStyle(ele,options){//遍历样式对象for(var attr in options){ele.style[attr]=options[attr]}
}

AJAX+php实现分页器：分页展示数据相关推荐

Flask 实现分页展示数据（简单套路）
简单方法套路套用模板,定义宏.在templates里新建一个_macros.html,代码如下 {% macro pagination_widget(pagination, endpoint) %} ...
django使用Paginator分页展示数据
思路: view得到基本数据: 提供给前端当前页面的数据判断是否有上一页/下一页 url路由前端展示 View逻辑写一个简单的View,使用Paginator时: 首先导入django.core ...
如何分页展示数据【smark-work-parent】
1,自定义要分页类 package com.zskj.smart_wok.service.bean;import lombok.Getter; import lombok.Setter; import ...
jQuery中实现，datatable后台数据获取与前端分页展示
1.依赖的插件和包文件 <link rel="stylesheet" type="text/css& ...
黑马旅游网编写练习(6)--旅游线路分页展示功能
黑马旅游网编写练习(6)–旅游线路分页展示功能首页的目录展示功能已经完成,在进入主页后,页面会自动向服务器发送Ajax请求,从而获取目录数据,我们将其名称cname展示到页面中:接下来要实现的是分页 ...
自我规范模版A要求2：展示数据列表（无从表）和导出数据页面
名称: 展示数据列表 (无从表)和导出页面路径要求: /pages/${entityClassName}/XXX_list.zul /pages/${entityClassName}/XXX_lis ...
Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录页面展示分页显示数据添加用户信息 (单个/批量)删除用户编辑 ...
利用bootstraptable展示数据，对数据进行排序分页等操作
今天分享一下bootstraptable的相关技能点,由于第一次接触,所以刚开始碰了好多壁,于是趁现在过去不久,先总结总结. Bootstraptable简单的来说就是一个表格控件,但是这个表格可不是 ...
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能一.部分技术选型二.项目结构三.功能需求和效果展示四.关键代码 4.1页 ...

AJAX+php实现分页器：分页展示数据

AJAX+php实现分页器：分页展示数据相关推荐

最新文章

热门文章