假分页的前端实现（html+bootstrap+js）
第一种是显示所有页数的，暂时固定页面是5。如下图：
第二种是借由HTML5的表单新属性，选择页数即刷新表格数据。如图：
二、固定数字分页实现
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表格title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
head> <body>
<table class="table table-striped" style="max-height: 300px;width: 900px; margin:0 auto;"> <thead><tr><th>分会账号th><th>名称th><th>充值总额th><th>充值次数th><th>注册人数th><th>注册IP数th><th>日期th>tr> thead><tbody id="tablePage"><tr><td>1td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>2td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>3td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>4td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>5td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>6td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>7td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>8td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>9td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr><tr><td>10td><td>是对方即td><td>1000td><td>50td><td>60td><td>60td><td>2016.08.05td>tr>tbody>
table>
<div style="width:300px; margin:0 auto;"><ul class="pagination" id="pageList"><li id="spanPre" class="disabled"> <a href="javascript:pre();">«a>li><li id="spanpage1" class="active"><a href="javascript:nPage(1)">1a>li><li id="spanpage2" ><a href="javascript:nPage(2)">2a>li><li id="spanpage3" ><a href="javascript:nPage(3)">3a>li><li id="spanpage4" ><a href="javascript:nPage(4)">4a>li><li id="spanpage5" ><a href="javascript:nPage(5)">5a>li><li id="spanNext" ><a href="javascript:next()">»a>li>ul>
div>
body>
html>
<script>
var theTable = document.getElementById("tablePage");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var pageList = document.getElementById("pageList");
var spanPageN = pageList.getElementsByTagName("li");var numberRowsInTable = theTable.rows.length;
var pageSize = 2;
var page = 1; //清除列表的active样式
function clearActive(){for(var i=1;i1 ;i++){console.log(spanPageN[i].id);spanPageN[i].setAttribute("class","");}
}
//下一页
function next(){ hideTable(); //当前最后一行行数 currentRow = pageSize * page; maxRow = currentRow + pageSize; // 判断是否到了table最后几行数据if ( maxRow > numberRowsInTable ) {maxRow = numberRowsInTable; }for ( var i = currentRow; i< maxRow; i++ ){ theTable.rows[i].style.display = ''; } page++; if ( maxRow == numberRowsInTable ){ console.log(maxRow+"=======");nextOff();} preOn();showPageActive(page); } //上一页
function pre(){ hideTable(); page--; currentRow = pageSize * page; maxRow = currentRow - pageSize; if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable; for ( var i = maxRow; i< currentRow; i++ ){ //清除display样式，display将使用默认 theTable.rows[i].style.display = ''; } if ( maxRow == 0 ){ preOff(); } showPageActive(page); nextOn(); } //第几页
function nPage(n){ hideTable(); currentRow = pageSize * (n-1); maxRow = currentRow + pageSize; if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable; for ( var i = currentRow; i''; } if(n==1){preOff(); }else if(n*pageSize==numberRowsInTable) {nextOff();}else{nextOn(); preOn(); } showPageActive(n); } function hideTable(){ for ( var i = 0; i'none'; }
} //将当前页设为active
function showPageActive(p){ //清除之前的clearActive();var nowpage = document.getElementById('spanpage'+p);console.log(nowpage.id);nowpage.setAttribute("class", "active");} //总共页数
function pageCount(){ var count = 0; //判断是否整除if ( numberRowsInTable%pageSize != 0 ) count = 1; return parseInt(numberRowsInTable/pageSize) + count;
} //上一页下一页链接的禁用和打开
function preOn(){ spanPre.innerHTML=" «";spanPre.setAttribute("class", "");
}
function preOff(){//bootstrap设置禁用样式之后还是可以点击一次，所以这里直接修改innerHTML解决这个问题。spanPre.innerHTML=" «";spanPre.className = "disabled";
}
function nextOn(){ spanNext.innerHTML="»";spanNext.setAttribute("class", "");
}
function nextOff(){ spanNext.innerHTML="»";spanNext.setAttribute("class", "disabled");
} //隐藏表格 ,只显示第一页的内容
function hide(){ for ( var i = pageSize; i'none'; } preOff(); nextOn();
} hide();
script> 三、选择页数分页的实现
table代码与上面一致，底边栏代码如下：
<div style="width:900px; margin:0 auto;"><div class="row"><div class ="col-md-4 col-sm-10 left" ><form class="form-inline " oninput="javascript:nPage(parseInt(num.value));"><input class="form-control myinput" type="number" id="num"><button class="btn btn-primary">总页数为：<span id="totalPage">span>button>form>div><div class="col-md-8 col-sm-10 "><ul class="pager"><li class="previous" id="spanPre"><a href="javascript:pre()">← 上一页a>li> <li class="previous "><span id="nowPageShow">span>li><li class="next" id="spanNext"><a href="javascript:next()">下一页 →a>li>ul>div>div>div>.js代码，其实大部分内容跟上面是一样的，只是增加了总页码和对输入的数据做了处理。
var theTable = document.getElementById("tablePage");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var totalPage = document.getElementById("totalPage");
var nowPageShow = document.getElementById("nowPageShow");
var numInput = document.getElementById("num");var numberRowsInTable = theTable.rows.length;
var pageSize = 2;
var page = 1;
var totalPageNum;//下一页
function next(){ hideTable(); //当前最后一行行数 currentRow = pageSize * page; maxRow = currentRow + pageSize; // 判断是否到了table最后几行数据if ( maxRow > numberRowsInTable ) {maxRow = numberRowsInTable; }for ( var i = currentRow; i< maxRow; i++ ){ theTable.rows[i].style.display = ''; } page++; if ( maxRow == numberRowsInTable ){ console.log(maxRow+"=======");nextOff();} preOn();showPage(page); } //上一页
function pre(){ hideTable(); page--; currentRow = pageSize * page; maxRow = currentRow - pageSize; if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable; for ( var i = maxRow; i< currentRow; i++ ){ //清除display样式，display将使用默认 theTable.rows[i].style.display = ''; } if ( maxRow == 0 ){ preOff(); } showPage(page); nextOn(); } //第几页
function nPage(n){ if(n>0 && n<= totalPageNum){hideTable(); //设置页面全局变量page=n;currentRow = pageSize * (n-1); maxRow = currentRow + pageSize; if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable; for ( var i = currentRow; i''; } if(n==1){preOff(); }else if(n*pageSize==numberRowsInTable) {nextOff();}else{nextOn(); preOn(); } showPage(n);}else{//对于其他操作过滤，比如input中输入的删除和回车if(!isNaN(n)) {alert('页码范围为：1-'+pageCount()+',请输入正确的页码！');}}
} function hideTable(){ for ( var i = 0; i'none'; }
} // //显示当前页
function showPage(p){nowPageShow.innerText="当前页面："+p;}//总共页数
function pageCount(){ var count = 0; //判断是否整除if ( numberRowsInTable%pageSize != 0 ) count = 1; return parseInt(numberRowsInTable/pageSize) + count;
} //上一页下一页链接的禁用和打开
function preOn(){ spanPre.innerHTML=" ← 上一页";spanPre.setAttribute("class", "");
}
function preOff(){//bootstrap设置禁用样式之后还是可以点击一次，所以这里直接修改innerHTML解决这个问题。spanPre.innerHTML=" ← 上一页";spanPre.className = "disabled";
}
function nextOn(){ spanNext.innerHTML="下一页 →";spanNext.setAttribute("class", "");
}
function nextOff(){ spanNext.innerHTML="下一页 →";spanNext.setAttribute("class", "disabled");
} //隐藏表格 ,只显示第一页的内容
function hide(){ for ( var i = pageSize; i'none'; } totalPageNum = pageCount();//显示总页数totalPage.innerText = totalPageNum ;//控制input输入numInput.min = 1;numInput.max = totalPageNum;//显示当前页数showPage(1);//初始按钮状态preOff(); nextOn();
} hide(); .css 就两句，为了好看。
.left{padding-top: 20px;
}.left .myinput{width: 120px;
}总结
1、js对于样式的修改主要有4种：
var obj = document.getElementById("spanPre");2、的样式，在设置class=”’之后，仍可以点击一次。如下这句话，会导致在第一页时，还能执行转上一页的函数以至于发生白屏现象。
<li id="spanPre" class="disabled"> <a href="javascript:pre();">«a>li>这个在网上找了别人的解决方法，说在<li>外面套<span>,但改完后，按钮一直保持不可用，无法修改为可用状态。暂时解决办法就是在js中修改<li>的HTML。为href='javascript:void(0);'之后可以点击也没有关系。3、input type设为后是无法输入其他字符的，对于删除输入框中的数字时，也会执行alert，这是将删除操作也当做输入了，所以我们判断一下，对于非数字的输入不进行任何操作。
//对于其他操作过滤，比如input中的删除和回车if(!isNaN(n)) {alert('页码范围为：1-'+pageCount()+',请输入正确的页码！');}
判断是否是数字只能用isNaN(n)，因为 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。
