分页的前端实现（html+bootstrap+js）"/>
假分页的前端实现（html+bootstrap+js）
一、开始
今天弄了一天的分页，总结一下今天的工作。
找了一下真假分页的区别：
所谓的“真分页”与“假分页”，前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。
而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。
“真分页”显然是效率更高，面对庞大的数据量也能够从容自若，但是缺点便是每次都需要和后台交互。
“假分页”不需要和后台交互，但是一旦面对大数据量时，加载将十分缓慢，影响用户的体验。借鉴分页代码来源：
根据网上的代码修改后，做了两种样式的分页：
第一种是显示所有页数的，暂时固定页面是5。如下图：
第二种是借由HTML5的表单新属性output，选择页数即刷新表格数据。如图：
二、固定数字分页实现
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表格</title>
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src=".1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src=".3.7/js/bootstrap.min.js"></script>
</head> <body>
<!-- table代码 --><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>1</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>2</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>3</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>4</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>5</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>6</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>7</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>8</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>9</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr><tr><td>10</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></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)">1</a></li><li id="spanpage2" ><a href="javascript:nPage(2)">2</a></li><li id="spanpage3" ><a href="javascript:nPage(3)">3</a></li><li id="spanpage4" ><a href="javascript:nPage(4)">4</a></li><li id="spanpage5" ><a href="javascript:nPage(5)">5</a></li><li id="spanNext" ><a href="javascript:next()">»</a></li></ul>
</div>
</body>
</html> <!-- 下面是js代码 -->
<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;i<spanPageN.length-1;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<maxRow; i++ ){ theTable.rows[i].style.display = ''; } if(n==1){preOff(); }else if(n*pageSize==numberRowsInTable) {nextOff();}else{nextOn(); preOn(); } showPageActive(n); } function hideTable(){ for ( var i = 0; i<numberRowsInTable; i++ ){ theTable.rows[i].style.display = '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=" <a href='javascript:pre();'>«</a>";spanPre.setAttribute("class", "");
}
function preOff(){//bootstrap设置禁用样式之后还是可以点击一次，所以这里直接修改innerHTML解决这个问题。spanPre.innerHTML=" <a href='javascript:void(0);'>«</a>";spanPre.className = "disabled";
}
function nextOn(){ spanNext.innerHTML="<a href='javascript:next()'>»</a>";spanNext.setAttribute("class", "");
}
function nextOff(){ spanNext.innerHTML="<a href='javascript:void(0)'>»</a>";spanNext.setAttribute("class", "disabled");
} //隐藏表格 ,只显示第一页的内容
function hide(){ for ( var i = pageSize; i<numberRowsInTable; i++ ){ theTable.rows[i].style.display = '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>inputPage.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<maxRow; i++ ){ theTable.rows[i].style.display = ''; } 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<numberRowsInTable; i++ ){ theTable.rows[i].style.display = '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=" <a href='javascript:pre();'>← 上一页</a>";spanPre.setAttribute("class", "");
}
function preOff(){//bootstrap设置禁用样式之后还是可以点击一次，所以这里直接修改innerHTML解决这个问题。spanPre.innerHTML=" <a href='javascript:void(0);'>← 上一页</a>";spanPre.className = "disabled";
}
function nextOn(){ spanNext.innerHTML="<a href='javascript:next()'>下一页 →</a>";spanNext.setAttribute("class", "");
}
function nextOff(){ spanNext.innerHTML="<a href='javascript:void(0)'>下一页 →</a>";spanNext.setAttribute("class", "disabled");
} //隐藏表格 ,只显示第一页的内容
function hide(){ for ( var i = pageSize; i<numberRowsInTable; i++ ){ theTable.rows[i].style.display = 'none'; } totalPageNum = pageCount();//显示总页数totalPage.innerText = totalPageNum ;//控制input输入numInput.min = 1;numInput.max = totalPageNum;//显示当前页数showPage(1);//初始按钮状态preOff(); nextOn();
} hide(); inuptPage.css 就两句，为了好看。
.left{padding-top: 20px;
}.left .myinput{width: 120px;
}总结
1、js对于样式的修改主要有4种：
var obj = document.getElementById("spanPre");1、使用obj.className来修改样式表的类名。
obj.style.backgroundColor= "black";2、使用obj.className来修改样式表的类名。
下面两种写法是一样的。disabled是bootstrap的一个元素样式类名。
obj.className = "disabled";
obj.setAttribute("class", "disabled");3、使用obj.style.cssTest来修改嵌入式的css。
obj.style.cssText = "background-color:black;";4、使用更改外联的css文件，从而改变元素的css
obj.setAttribute("href","css2.css");
2、bootstrap的disabled样式，在设置class=”disabled’之后，仍可以点击一次。如下这句话，会导致在第一页时，还能执行转上一页的函数以至于发生白屏现象。
<li id="spanPre" class="disabled"> <a href="javascript:pre();">«</a></li>这个在网上找了别人的解决方法，说在<li>外面套<span>,但改完后，按钮一直保持不可用，无法修改为可用状态。暂时解决办法就是在js中修改<li>的HTML。为href='javascript:void(0);'之后可以点击也没有关系。3、input type设为number后是无法输入其他字符的，对于删除输入框中的数字时，也会执行alert，这是将删除操作也当做输入了，所以我们判断一下，对于非数字的输入不进行任何操作。
//对于其他操作过滤，比如input中的删除和回车if(!isNaN(n)) {alert('页码范围为：1-'+pageCount()+',请输入正确的页码！');}
判断是否是数字只能用isNaN(n)，因为 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。
更多推荐
假分页的前端实现（html+bootstrap+js）
发布评论