原生js写的一个分页插件

最新推荐文章于 2024-10-25 10:20:18 发布

原创最新推荐文章于 2024-10-25 10:20:18 发布 · 587 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js分页

本文介绍了一个简单的前端分页组件的实现过程，包括使用Ajax获取数据、构建分页导航及内容展示区等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##不废话直接上代码

data.json===>["111","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","4444","3333","2222","3333","2222","5555","2222","4444","2222","3333","6666","3333","2222","3333","2222","7777","2222","6666"]

json文件可以自己写

## ajax.js==》

function Ajax(url){

return new Promise(function(resolve,reject){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get",url,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status == 200){
var data = xhr.responseText;
resolve(data);
}else{
reject("请求失败");
}
}
}
})

}

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>page</title>
<style type="text/css">
body,ul,ol{
list-style: none;
margin: 0;
padding: 0;
}
ul{
width: 400px;
height: auto;
border: 1px solid #666;
}
ul li{
width: 400px;
height: 50px;
border-bottom: 1px solid #999;
}
ol li{
cursor: pointer;
line-height: 50px;
height: 50px;
float: left;
margin-left: 3px;
border: 1px solid red;
}
ol li:nth-child(1){
margin-left: 0;
}
ol li span{
display: inline-block;
border: 1px solid red;
cursor: pointer;
padding:0 8px;
margin: 0 2px;
}
#pagenum{
border:0;
}
.countIndex{
background: red;
}
</style>
<script src="ajax.js"></script>
</head>
<body>
<ul id="content">

</ul>
<ol id="page">
<li id="home">首页</li>
<li id="last">上一页</li>
<li id="pagenum"></li>
<li id="next">下一页</li>
<li id="end">尾页</li>
</ol>
<script type="text/javascript">
var oContent = document.getElementById("content");
var oPage = document.getElementById("page");
var oPageCount = oPage.children;
var oPagenum = document.getElementById("pagenum");
Ajax("data.json").then(function(data){
data = JSON.parse(data);
var countNum = 5;
var pages = Math.ceil(data.length/countNum);
for (var i =0;i<pages;i++){
var oSpan = document.createElement("span");
oSpan.innerHTML=i+1;
oPagenum.appendChild(oSpan);
}
//首页默认显示内容
var pageIndex = 0;
show(pageIndex);
var aSpan = oPagenum.children;
for(var j=0;j<aSpan.length;j++){
aSpan[j].index = j;
//点击页码显示不同页码的内容
aSpan[0].className="countIndex";
aSpan[j].onclick=function(){
oContent.innerHTML="";
pageIndex = this.index;
show(pageIndex);
aSpan[this.index].className="countIndex";
}
}
//首页
oPageCount[0].onclick=function(){
oContent.innerHTML="";
pageIndex=0;
show(pageIndex);
aSpan[0].className="countIndex";
}
//尾页
oPageCount[oPageCount.length-1].onclick=function(){
oContent.innerHTML="";
pageIndex=aSpan.length-1;
show(pageIndex);
aSpan[aSpan.length-1].className="countIndex";
}
//上一页
oPageCount[1].onclick=function(){
oContent.innerHTML="";
pageIndex--;
if(pageIndex<=0){
pageIndex=0;
}
show(pageIndex);
aSpan[pageIndex].className="countIndex";
}
//下一页
oPageCount[oPageCount.length-2].onclick=function(){
oContent.innerHTML="";
pageIndex++;
if(pageIndex>=pages-1){
pageIndex=pages-1;
}
show(pageIndex);
aSpan[pageIndex].className="countIndex";
}
var spanLen = aSpan.length;
//添加content分页内容
function show(num){
for (var n=0;n<spanLen;n++){
aSpan[n].className="";
}
for(var i= num*countNum;i<Math.min((num+1)*countNum,data.length);i++){
var oLi = document.createElement("li");
oLi.innerHTML=data[i];
oContent.appendChild(oLi);
}
}
})
</script>
</body>
</html>