后台没做分页处理的情况下前端用JavaScript完成分页

最新推荐文章于 2024-07-25 11:52:08 发布

前端工程师请求出战

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量756

点赞数 1

分类专栏：经验之谈文章标签： html css javascript jquery css3

本文链接：https://blog.csdn.net/jinchunye/article/details/109339485

版权

经验之谈专栏收录该内容

12 篇文章 0 订阅

订阅专栏

只有数据的情况下完成分页

后台只给了数据，所以说一些分页插件运用不了，所以前端自行完成分页。
缺点：下载量大，显示慢，加载时用户体验不好。服务器压力请求少，换页时用户体验好。如果有即时性内容，就不能翻回来的时候更新了。

说明：需要完成需求，公司全是前端，借鉴网上一些纯前端实现分页，自己总结了一下。

思维导图

分页思维导图

代码展示

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'>"+"共&nbsp&nbsp&nbsp"+num+"&nbsp&nbsp&nbsp个"+"</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、划时代意义的第一篇分享，加油！！！

前端工程师请求出战

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
后台没做分页处理的情况下前端用JavaScript完成分页

只有数据的情况下完成分页后台只给了数据，所以说一些分页插件运用不了，所以前端自行完成分页。缺点：下载量大，显示慢，加载时用户体验不好。服务器压力请求少，换页时用户体验好。如果有即时性内容，就不能翻回来的时候更新了。说明：需要完成需求，公司全是前端，借鉴网上一些纯前端实现分页，自己总结了一下。思维导图代码展示1、html部分在这里插入代码片2、css部分3、js分页逻辑部分4、js事件部分...
复制链接

扫一扫

专栏目录