当前位置:网站首页>html+ vue.js Implementing paging compatible IE
html+ vue.js Implementing paging compatible IE
2020-11-06 21:07:16 【itread01】
#### When the function is simple , In a single html Use in vue.js Pagination presentation materials , There is no scaffold installed , Or use related UI frame , You need to write a pager , It is the most reasonable and convenient solution , Let's take a look at the implementation :  #### Code on :
2. Make it simple HTML ```
1. Make it simple CSS, The code here is folded
[v-cloak] {
display: none;
}
#app {
text-align: center;
padding-top: 300px;
height:500px;
}
.pageContainer {
width: 800px;
margin: 100px auto;
text-align: center;
font-size: 14px;
color: #A3A3A3;
}
.pageContainer ul.pagesInner {
height: 30px;
line-height: 30px;
display: inline-block;
padding: 0;
}
.pageContainer ul.pagesInner li {
width: 30px;
height: 30px;
display: inline-block;
border: 1px solid #E5E5E5;
margin: 0 5px;
list-style: none;
}
.pageContainer ul.pagesInner li.actived {
background: #FF6200;
color: #ffffff;
}
.pageContainer .page-size-box {
position: relative;
display: inline-block;
width: 70px;
border: 1px solid #E5E5E5;
height: 30px;
line-height: 30px;
}
.pageContainer ul.size-option {
display: inline-block;
border: 1px solid #E5E5E5;
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: -120px;
background: #ffffff;
}
.pageContainer ul.size-option li{
list-style: none;
width: 70px;
}
.pageContainer ul.size-option li:hover{
color: #FF6200;
}
.pageContainer form {
display: inline-block;
}
.pageContainer form input,
.pageContainer button {
outline: none;
padding: 0;
width: 46px;
height: 30px;
background: #ffffff;
border: 1px solid #E5E5E5;
color: #A3A3A3;
}
The first {{pageIndex}} Page , Each page shows {{pageSize}} Strip
``` ## 3. Something's going on ~~~~ #### First of all, the realization of paging function is analyzed : - The first and last pages always show , - Through the total number of data dataListLength And the number of bars per page pageSize, Calculate the total number of pages pageTotalNum - Monitoring watch once , Number of bars per page pageSize, Reset current page number pageIndex=1 - The pagination I designed displays at most 5 Page number ( You can adjust according to your needs ), The rest ... Instead of , And set not to click , - Switch according to different total pages and current page number , The display form of the tab is different , The display form is shown in the figure below, corresponding to the serial number > 1. Total pages <= 1, Don't show pager > 2. Total pages <= 5 && Total pages > 1, Show all page numbers > 3. Total pages > 5 && Current page <= 3 , The last page is ..., Page number from ** Left ** Go to ** Right ** Calculation > 4. Total pages > 5 && Current page > 3 && Current page < Total pages - 3 , The last page number is ..., The page number is calculated according to the current page number ,**±1** > 5. Total pages > 5 && Current page > 3 && Current page > Total pages - 3 , The second positive page number is ..., Page number from ** Right ** Go to ** Left ** Calculation  ```
```
common {{dataListLength}} Strip
- <
- {{item}}
- >
{{pageSize}} Strip / Page
Jump to Page button @click="handleGoToPage"> Make sure
- {{item}} Strip / Page
版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World