只有数据的情况下完成分页
后台只给了数据,所以说一些分页插件运用不了,所以前端自行完成分页。
缺点:下载量大,显示慢,加载时用户体验不好。服务器压力请求少,换页时用户体验好。如果有即时性内容,就不能翻回来的时候更新了。
说明:需要完成需求,公司全是前端,借鉴网上一些纯前端实现分页,自己总结了一下。
思维导图
代码展示
1、html部分
<div id = "page-dome">
<div id = "data">
</div>
<!-- 分页 -->
<div class = "page">
</div>
</div>
2、css部分
<style>
#page-dome{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 10%;
}
/* 分页样式 */
.sum{
display: inline-block;
font-size: 16px;
margin-right: 30px;
}
a{
color: #8f8989;
}
/* 上一页 */
.up{
display: inline-block;
font-size: 16px;
font-weight: 700;
color: #3a4659;
cursor: pointer;
}
/* 第几页 */
.number{
width: 25px;
background: rgba(43, 42, 42, 0.5);
text-align: center;
display: inline-block;
border-radius: 2px;
font-size: 16px;
margin: 0 4px;
cursor: pointer;
}
/* 省略号 */
.omit::before{
content: "•••";
width: 25px;
height: 25px;
line-height: 27px;
background: rgba(43, 42, 42, 0.5);
text-align: center;
display: inline-block;
border-radius: 2px;
font-size: 10px;
margin: 0 4px;
}
/* 下一页 */
.next{
display: inline-block;
font-size: 16px;
font-weight: 700;
color: #3a4659;
cursor: pointer;
}
</style>
3、js分页逻辑部分(数据生成写入html)
function pageData(){
let data = [
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
{
name: "重剑无锋,大巧不攻",
},
]
var list = '';
data.forEach((e,index)=>{
list += '<p>'+
e.name +
'第'+ index +'个'
'</p>'
})
$('#data').html(list)
// 执行分页
goPage(1,3)
// 页面出现为第一个页码添加css样式
$('.number').eq(0).css('background','#ff7a1e')
}
pageData()
4、js分页逻辑部分(分页事件)
// 分页
function goPage(pno,psize){
let num = $('#data p').length; // 获取到数据的个数
let totalPage = 0; // 总页数
let pageSize = psize; // 每页显示行数
// 通过数量除每一页要显示的个数和取整作比较确定出要分几页
if(num / pageSize > parseInt(num / pageSize)){
totalPage = parseInt(num / pageSize) + 1;
}else{
totalPage = parseInt(num / pageSize);
}
let currentPage = pno; // 当前页数
let startRow = (currentPage - 1) * pageSize + 1; // 开始显示个数
let endRow = currentPage * pageSize; // 结束显示个数
endRow = (endRow > num) ? num : endRow; // 判断结束个数
// 遍历当前显示数据实现分页
for(let i = 1; i < (num + 1); i++){
let irow = $('#data p')[i - 1];
if(i >= startRow && i <= endRow){
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
// 一共多少个数据
let tempStr = "<span class = 'sum'>"+"共   "+num+"   个"+"</span>";
// 点击左按钮
if(currentPage > 1){
// tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
tempStr += '<span class = up onclick = "sub('+currentPage+')">' +
"<a href=\"javascript:;\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"> < </a></span>"
}else{
// tempStr += "首页";
tempStr += "<span class = 'up'>" +
"<"+
"</span>"
}
// 如果总页数超出5个处理办法
// currentPage是当前第几页
// totalPage是总页数
if(totalPage <= 5){
for(let pageIndex = 1; pageIndex <= totalPage; pageIndex++){
tempStr += '<span class = "number" data-page = '+pageIndex+' onclick = "numberClick('+pageIndex+')">'+ pageIndex +'</span>';
}
}else{
if(currentPage < 5){
for(let pageIndex = 1 ; pageIndex < 5; pageIndex++){
tempStr += '<span class = "number" data-page = '+pageIndex+' onclick = "numberClick('+pageIndex+')">'+ pageIndex +'</span>';
}
// omit为省略号
tempStr+='<span class = "omit"></span>';
tempStr += '<span class = "number" data-page = '+totalPage+' onclick = "numberClick('+totalPage+')">'+ totalPage +'</span>';
}else if(currentPage >= totalPage - 4){
tempStr += '<span class = "number" data-page = '+1+' onclick = "numberClick('+1+')">'+ 1 +'</span>';
tempStr+='<span class = "omit"></span>';
for(let pageIndex = totalPage - 4 ; pageIndex <= totalPage; pageIndex ++){
tempStr += '<span class = "number" data-page = '+pageIndex+' onclick = "numberClick('+pageIndex+')">'+ pageIndex +'</span>';
}
}else if(currentPage >= 5 && currentPage < totalPage - 4){
tempStr += '<span class = "number" data-page = '+1+' onclick = "numberClick('+1+')">'+ 1 +'</span>';
tempStr+='<span class = "omit"></span>';
for(let pageIndex = currentPage ; pageIndex <= currentPage + 4; pageIndex ++){
tempStr += '<span class = "number" data-page = '+pageIndex+' onclick = "numberClick('+pageIndex+')">'+ pageIndex +'</span>';
}
tempStr+='<span class = "omit"></span>';
tempStr += '<span class = "number" data-page = '+totalPage+' onclick = "numberClick('+totalPage+')">'+ totalPage +'</span>';
}
}
// 点击右按钮
if(currentPage < totalPage){
tempStr += '<span class = "next" onclick = "add('+currentPage+')">' +
"<a href=\"javascript:;\" onClick=\"goPage("+(currentPage+1)+","+psize+")\"> > </a></span>";
// tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
}else{
tempStr += "<span class = 'next'>" +
'>' +
"</span>"
// tempStr += "尾页";
}
// 把上面累计所得tempStr添加到分页标签中
$('.page').html(tempStr);
}
5、js分页逻辑部分(页码按钮和左右切换按钮)
// 翻页点击事件
function numberClick(index){
goPage(index,3);
$('.number[data-page='+index+']').css('background','#ff7a1e').siblings('.number').css('background','rgba(43, 42, 42, 0.5)')
}
// 向左点击按钮
function sub(currentPage){
let sum = currentPage - 1;
$('.number[data-page='+sum+']').css('background','#ff7a1e').siblings('.number').css('background','rgba(43, 42, 42, 0.5)')
}
// 向右点击按钮
function add(currentPage){
let sum = currentPage + 1;
$('.number[data-page='+sum+']').css('background','#ff7a1e').siblings('.number').css('background','rgba(43, 42, 42, 0.5)')
}
这个需要引入一下jq
效果图
可优化部分
1、但我们翻页到中间的时候,点击最左页码或最右页码也可以更新下一组(上一组)页码
2、哎呀!突然忘了!
3、划时代意义的第一篇分享,加油!!!