后台没做分页处理的情况下前端用JavaScript完成分页_没有后台支持怎么实现分页效果

作者：weixin_40725706 | 2024-02-27 18:03:23

踩

没有后台支持怎么实现分页效果

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

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

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

思维导图

分页思维导图

代码展示

1、html部分

<div id = "page-dome">
    <div id = "data">
    
    </div>
    <!-- 分页 -->
    <div class = "page">
                
    </div>
</div>
1
2
3
4
5
6
7
8
9

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

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);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

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)')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这个需要引入一下jq

效果图

分页效果图

可优化部分

1、但我们翻页到中间的时候，点击最左页码或最右页码也可以更新下一组(上一组)页码
2、哎呀！突然忘了！
3、划时代意义的第一篇分享，加油！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/155057?site