一、开始
今天弄了一天的分页,总结一下今天的工作。
找了一下真假分页的区别:
所谓的“真分页”与“假分页”,前者是在后台的时候就将数据给分好,前台显示,每一次的点击“前一页”、“下一页”就向后台发送一次请求。
而后者便是后台将全部数据发送给前台,将数据绑定在控件上,利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。
“真分页”显然是效率更高,面对庞大的数据量也能够从容自若,但是缺点便是每次都需要和后台交互。
“假分页”不需要和后台交互,但是一旦面对大数据量时,加载将十分缓慢,影响用户的体验。
借鉴分页代码来源:http://rq2-79.iteye/blog/142626
根据网上的代码修改后,做了两种样式的分页:
第一种是显示所有页数的,暂时固定页面是5。如下图:
第二种是借由HTML5的表单新属性output,选择页数即刷新表格数据。如图:
二、固定数字分页实现
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表格</title>
<link href="https://cdn.bootcss/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss/bootstrap/3.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)
发布评论