假分页的前端实现（html+bootstrap+js）

最新推荐文章于 2024-05-05 00:40:40 发布

一条大河全靠浪

最新推荐文章于 2024-05-05 00:40:40 发布

阅读量3.5k

点赞数 1

分类专栏： javascript 文章标签：假分页 HTML js

本文链接：https://blog.csdn.net/HYeeee/article/details/80137598

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、开始

今天弄了一天的分页，总结一下今天的工作。
找了一下真假分页的区别：

所谓的“真分页”与“假分页”，前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。
而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。 
“真分页”显然是效率更高，面对庞大的数据量也能够从容自若，但是缺点便是每次都需要和后台交互。
“假分页”不需要和后台交互，但是一旦面对大数据量时，加载将十分缓慢，影响用户的体验。

借鉴分页代码来源：http://rq2-79.iteye.com/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.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/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();">&laquo;</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()">&raquo;</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();'>&laquo;</a>";
   spanPre.setAttribute("class", "");
}   
function preOff(){
    //bootstrap设置禁用样式之后还是可以点击一次，所以这里直接修改innerHTML解决这个问题。
    spanPre.innerHTML=" <a href='javascript:void(0);'>&laquo;</a>";
    spanPre.className = "disabled";    
}    
function nextOn(){ 
    spanNext.innerHTML="<a href='javascript:next()'>&raquo;</a>";
    spanNext.setAttribute("class", "");  
}   
function nextOff(){ 
    spanNext.innerHTML="<a href='javascript:void(0)'>&raquo;</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()">&larr; 上一页</a></li>            
                <li class="previous "><span id="nowPageShow"></span></li>
                <li class="next" id="spanNext"><a href="javascript:next()">下一页 &rarr;</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();'>&larr; 上一页</a>";
   spanPre.setAttribute("class", "");
}   
function preOff(){
    //bootstrap设置禁用样式之后还是可以点击一次，所以这里直接修改innerHTML解决这个问题。
    spanPre.innerHTML=" <a href='javascript:void(0);'>&larr; 上一页</a>";
    spanPre.className = "disabled";    
}    
function nextOn(){ 
    spanNext.innerHTML="<a href='javascript:next()'>下一页 &rarr;</a>";
    spanNext.setAttribute("class", "");  
}   
function nextOff(){ 
    spanNext.innerHTML="<a href='javascript:void(0)'>下一页 &rarr;</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();">&laquo;</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，不能使用 == 或 === 运算符。

一条大河全靠浪

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
假分页的前端实现（html+bootstrap+js）

一、开始今天弄了一天的分页，总结一下今天的工作。找了一下真假分页的区别：所谓的“真分页”与“假分页”，前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。 “真分页”显然是效率更高，面对庞大的数据量也能够从...
复制链接

扫一扫