分页(模仿百度)

摘要:
此分页是上次分页的升级版本。页面格式模仿百度,使用原生JS时不用多说,只需看看代码<htmllang=“en”>}#导航{位置;绝对值:50%:左;}a{display;height;padding;border;margin;text align;center:行高度;34px:文本装饰;color;#00f:

这次分页时上次分页的升级版,分页格式模仿百度,使用的是原生JS

话不多说,直接看代码吧

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<style>
#Data {
border: 1px solid #f00;
text-align: center;
margin: 50px auto;
}
#nav{
position: absolute;
top: 50%;
left: 10%;
}
a{
display: inline-block;
height: 34px;
padding: 0 18px;
border: 1px solid #e1e2e3;
margin: 10px;
text-align: center;
line-height: 34px;
text-decoration: none;
color: #00f;
}
</style>
</head>
<body>
<table width="70%">
<tr><td>测试编号1</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号2</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号3</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号4</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号5</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号6</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号7</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号8</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号9</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号10</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号11</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号12</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号13</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号14</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号15</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号16</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号17</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号18</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号19</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号20</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号21</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号22</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号23</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号24</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号25</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号26</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号27</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号28</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号29</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号30</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号31</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号32</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号33</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号34</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号35</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号36</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号37</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号38</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号39</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号40</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号31</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号42</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号43</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号44</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号45</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号46</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号47</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
<tr><td>测试编号48</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>
</table>
<div id = 'nav'></div>
<script>
// 分页函数,参数当前页数,每页行数
function goPage(curPage,Pagerow){
var itable = document.getElementById('Data');
var num = itable.rows.length;//记录所有行
var totalPage = null;//记录总页数

//总共分几页
if(num / Pagerow > parseInt(num / Pagerow)){
totalPage = parseInt(num / Pagerow) + 1;
}else{
totalPage = parseInt(num / Pagerow);
}
console.log('总页数:'+totalPage);
console.log('当前页:'+curPage);

//每页开始显示的行数
var startRow = (curPage - 1) * Pagerow + 1;
//每页结尾显示的行数
var endRow = curPage * Pagerow;

//便利数据实现分页
for(var i = 1;i <= num;i ++){
var irow = itable.rows[i-1];
if(i >= startRow && i <= endRow){
irow.style.display = 'block';
}else{
irow.style.display = 'none';
}
}

//创建分页块
var nPage = '';
if(curPage > 1){
nPage += "<a href="http://t.zoukankan.com/awei313558147-p-11577173.html#" onclick="goPage("+(curPage-1)+','+Pagerow+")">上一页</a>";
}
for(var i = 1; i <= totalPage; i ++){
nPage += "<a href="http://t.zoukankan.com/awei313558147-p-11577173.html#" onclick="goPage("+(i)+','+Pagerow+")">"+i+"</a>";
}
if(curPage < totalPage){
nPage += "<a href="http://t.zoukankan.com/awei313558147-p-11577173.html#" onclick="goPage("+(curPage+1)+','+Pagerow+")">下一页</a>";
}

//将分页块添加至页面中
document.getElementById('nav').innerHTML = nPage;

//改变分页块在当前页时显示的样式
var a = document.getElementsByClassName('a');
//当总页数小于10的时候
if(totalPage <= 10){
if(curPage == 1){
// 初始页的样式
a[0].removeAttribute('href');
a[0].style.color = '#000';
a[0].style.border = '0';
nav.style.left = '16%';
}else{
// 当前页的样式
a[curPage-1].removeAttribute('href');
a[curPage-1].style.color = '#000';
a[curPage-1].style.border = '0';
nav.style.left = '10%';
}
}

//当总页数大于10的时候
if(totalPage > 10){
// 先让10之后的分页块隐藏
for(var i = 10; i < totalPage; i ++){
a[i].style.display = 'none';
}
if(curPage <= 10){
if(curPage == 1){
// 初始页的样式
a[0].removeAttribute('href');
a[0].style.color = '#000';
a[0].style.border = '0';
nav.style.left = '16%';
}else{
// 当前页的样式
a[curPage-1].removeAttribute('href');
a[curPage-1].style.color = '#000';
a[curPage-1].style.border = '0';
nav.style.left = '10%';
}
}
// 当前页大于6后的情况
if(curPage > 6){
for(var i = 0; i < totalPage; i ++){
a[i].style.display = 'inline-block';
}
// 每往后退一页,前面少一页
for(var i = 0; i < curPage - 6; i ++){
a[i].style.display = 'none';
}
// 每往后退一页,后面加一页
for(var i = curPage + 4; i < totalPage; i ++){
a[i].style.display = 'none';
}
// 当前页的样式
a[curPage-1].removeAttribute('href');
a[curPage-1].style.color = '#000';
a[curPage-1].style.border = '0';
nav.style.left = '10%';
// 当快到尾页时,显示的也是10个分页块
if(curPage > totalPage - 5){
for(var i = totalPage - 10; i < totalPage; i ++){
a[i].style.display = 'inline-block';
}
}
}
}
}
// 页面加载完毕后,进行分页
window.onload = function(){
goPage(1,2)
}
</script>
</body>
</html>

免责声明:文章转载自《分页(模仿百度)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Python Flask获取iOS的UDID安卓开发_浅谈自定义组件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

TP5实现邮件发送(PHP 利用QQ邮箱发送邮件「PHPMailer」)

在 PHP 应用开发中,往往需要验证用户邮箱、发送消息通知,而使用 PHP 内置的 mail() 函数,则需要邮件系统的支持。     如果熟悉 IMAP/SMTP 协议,结合 Socket 功能就可以编写邮件发送程序了,不过开发这样一个程序并不容易。      好在 PHPMailer 封装的足够强大,使用它可以更加便捷的发送邮件,免去了我们很多额外的麻...

pom文件

1.父子pom 如果在一个工程中分多个模块,那么会有父子pom。一般子pom中会有配置,指示其依赖的父pom: <parent>    <groupId>com.xxx</groupId>    <artifactId>xxx</artifactId>    <version>1.1....

vue3逻辑分离和页面快速展示数据

逻辑分层 我们在使用vue3开发项目的时候, 如何进行【区域分层】呢???? 举一个简单的小粒子 一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】 这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 export default { setup () {...

应该记住的30个CSS选择器

了解基本的id选择器,类选择器和子选择器,如果就此收手,那你会错失很多灵活方法。虽然本文提及的部分选择器属于CSS3范围内,只在一些时新的浏览器有效,不过还是有必要记得这些选择器。 1. * * { margin: 0; padding: 0; } 在提到更先进的选择器之前,为初学者之便,先把常见的选择器解决掉。 星号符会选择页面每个元素。很多开发者用...

xios封装

封装的意义 1.提高代码可读性2.提高代码可维护性3.减少代码书写 封装 import axios from 'axios' axios.defaults.baseURL = 'http://127.0.0.1:8000' // 全局设置网络超时 axios.defaults.timeout = 10000; //设置请求头信息 axios.defau...

element 导航菜单 控制路由跳转

首先复制官网的例子,在这基础上再修改成我们想要的样子。 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el...