这次分页时上次分页的升级版，分页格式模仿百度，使用的是原生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 id="Data" 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="#" onclick="goPage("+(curPage-1)+','+Pagerow+")">上一页</a>";
}
for(var i = 1; i <= totalPage; i ++){
nPage += "<a class="a" href="#" onclick="goPage("+(i)+','+Pagerow+")">"+i+"</a>";
}
if(curPage < totalPage){
nPage += "<a href="#" 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>