js+table 实现分页

时间：2016-08-12 13:08:56 阅读：279 评论：0 收藏：0 [点我收藏+]

标签：

本文在html中利用js＋table实现分页。主要思想是先对table中的所有数据隐藏，然后通过当前页面(currPageNum)来计算当前页要显示的行，并显示出来，首页、下一页、上一页、尾页都依此来实现。

可以直接运行。

一、html页面

1. 在页面中直接向table写好数据，定义table的id；

2. 在页面中加入首页、上一页、下一页、尾页，当前页、总页数等标签；

3. 在页面中的javascript部分声明会用到的变量，并写好加载函数，window.onload=function(){...}。

二、js部分

1. 在js文件中依次实现首页、上一页、下一页、尾页等功能；

2. 控制首页等功能的显示与不显示。

以下是代码部分，欢迎批评与指正。

js文件为pagination.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title><style type="text/css">
    body{
    }
    table .table-striped{
    }
    table th{
        text-align: left;
        height: 30px;
        background: #deeeee;
        padding: 5px;
        margin: 0;
        border: 0px;
    }
    table td{
        text-align: left;
        height:30px;
        margin: 0;
        padding: 5px;
        border:0px
    }
    table tr:hover{
        background: #eeeeee;
    }
    .span6{
        /*width:500px;*/
        float:inherit;
        margin:10px;
    }
    #pagiDiv span{
        background:#1e90ff;
        border-radius: .2em;
        padding:5px;
    }
</style>
    <script type="text/javascript" src="pagination.js"></script>
    <script type="text/javascript">
        //全局变量
        var numCount;       //数据总数量
        var columnsCounts;  //数据列数量
        var pageCount;      //每页显示的数量
        var pageNum;        //总页数
        var currPageNum ;   //当前页数

        //页面标签变量
        var blockTable;
        var preSpan;
        var firstSpan;
        var nextSpan;
        var lastSpan;
        var pageNumSpan;
        var currPageSpan;



        window.onload=function(){
            //页面标签变量
            blockTable = document.getElementById("blocks");
            preSpan = document.getElementById("spanPre");
            firstSpan = document.getElementById("spanFirst");
            nextSpan = document.getElementById("spanNext");
            lastSpan = document.getElementById("spanLast");
            pageNumSpan = document.getElementById("spanTotalPage");
            currPageSpan = document.getElementById("spanPageNum");

            numCount = document.getElementById("blocks").rows.length - 1;       //取table的行数作为数据总数量（减去标题行1）
            alert(numCount)
            columnsCounts = blockTable.rows[0].cells.length;
            pageCount = 5;
            pageNum = parseInt(numCount/pageCount);
            if(0 != numCount%pageCount){
                pageNum += 1;
            }

            firstPage();
        };
    </script>
</head>
<body align="center">
<div class="container" align="center" >




    <h2 align="center">Recent blocks Found By AntPool</h2>




    <table id="blocks" class="table table-striped" style="margin-top:25px">
        <tr>
            <th>Height</th>
            <th>Time</th>

            <th class="hidden-phone">Hash</th>
            <th class="hidden-phone">Size (kB)</th>
        </tr>

        <tr>
            <td><a href="/block-height/424785">424785</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-12 02:05:22</td>

            <td class="hidden-phone"><a href="/block-index/1134734/000000000000000002b480be703da2ad59a55c53052aecf8b6f6f35e640cc60d">000000000000000002b480be703da2ad59a55c53052aecf8b6f6f35e640cc60d</a></td>
            <td class="hidden-phone">637.52</td>
        </tr>

        <tr>
            <td><a href="/block-height/424550">424550</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-10 11:24:24</td>

            <td class="hidden-phone"><a href="/block-index/1134499/000000000000000004c6a895e2ea6e12ff5e8046454ab663d14b569734228b8d">000000000000000004c6a895e2ea6e12ff5e8046454ab663d14b569734228b8d</a></td>
            <td class="hidden-phone">999.15</td>
        </tr>

        <tr>
            <td><a href="/block-height/424544">424544</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-10 10:17:29</td>

            <td class="hidden-phone"><a href="/block-index/1134493/0000000000000000053027e87de8298f06e42d30933c9fea3af9c116a5852659">0000000000000000053027e87de8298f06e42d30933c9fea3af9c116a5852659</a></td>
            <td class="hidden-phone">999.09</td>
        </tr>

        <tr>
            <td><a href="/block-height/424530">424530</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-10 07:41:23</td>

            <td class="hidden-phone"><a href="/block-index/1134479/000000000000000001e1450b8089bac13c69942660f54360abeb0b8a382a5cb5">000000000000000001e1450b8089bac13c69942660f54360abeb0b8a382a5cb5</a></td>
            <td class="hidden-phone">626.62</td>
        </tr>

        <tr>
            <td><a href="/block-height/424528">424528</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-10 07:25:05</td>

            <td class="hidden-phone"><a href="/block-index/1134477/000000000000000000241a05e40031a7b71c17babbb00255a633c224b8959775">000000000000000000241a05e40031a7b71c17babbb00255a633c224b8959775</a></td>
            <td class="hidden-phone">239.95</td>
        </tr>

    </table>

    <div id="pagiDiv" align="right" style="width:1200px">
        <span id="spanFirst">First</span>&nbsp;&nbsp;
        <span id="spanPre">Pre</span>&nbsp;&nbsp;
        <span id="spanNext">Next</span>&nbsp;&nbsp;
        <span id="spanLast">Last</span>&nbsp;&nbsp;
        The&nbsp;<span id="spanPageNum"></span>&nbsp;Page/Total&nbsp;<span id="spanTotalPage"></span>&nbsp;Page
    </div>

</div>
</body>
</html>

/**
 * Created by mendez on 16/8/12.
 */

function firstPage(){
    hide();
    currPageNum = 1;
    showCurrPage(currPageNum);
    showTotalPage();
    for(i = 1; i < pageCount + 1; i++){
        blockTable.rows[i].style.display = "";
    }

    firstText();
    preText();
    nextLink();
    lastLink();
}

function prePage(){
    hide();
    currPageNum--;
    showCurrPage(currPageNum);
    showTotalPage();
    var firstR = firstRow(currPageNum);
    var lastR = lastRow(firstR);
    for(i = firstR; i < lastR; i++){
        blockTable.rows[i].style.display = "";
    }

    if(1 == currPageNum){
        firstText();
        preText();
        nextLink();
        lastLink();
    }else if(pageNum == currPageNum){
        preLink();
        firstLink();
        nextText();
        lastText();
    }else{
        firstLink();
        preLink();
        nextLink();
        lastLink();
    }

}

function nextPage(){
    hide();
    currPageNum++;
    showCurrPage(currPageNum);
    showTotalPage();
    var firstR = firstRow(currPageNum);
    var lastR = lastRow(firstR);
    for(i = firstR; i < lastR; i ++){
        blockTable.rows[i].style.display = "";
    }

    if(1 == currPageNum){
        firstText();
        preText();
        nextLink();
        lastLink();
    }else if(pageNum == currPageNum){
        preLink();
        firstLink();
        nextText();
        lastText();
    }else{
        firstLink();
        preLink();
        nextLink();
        lastLink();
    }
}

function lastPage(){
    hide();
    currPageNum = pageNum;
    showCurrPage(currPageNum);
    showTotalPage();
    var firstR = firstRow(currPageNum);
    for(i = firstR; i < numCount + 1; i++){
        blockTable.rows[i].style.display = "";
    }

    firstLink();
    preLink();
    nextText();
    lastText();
}

// 计算将要显示的页面的首行和尾行
function firstRow(currPageNum){
    return pageCount*(currPageNum - 1) + 1;
}

function lastRow(firstRow){
    var lastRow = firstRow + pageCount;
    if(lastRow > numCount + 1){
        lastRow = numCount + 1;
    }
    return lastRow;
}

function showCurrPage(cpn){
    currPageSpan.innerHTML = cpn;
}

function showTotalPage(){
    pageNumSpan.innerHTML = pageNum;
}

//隐藏所有行
function hide(){
    for(var i = 1; i < numCount + 1; i ++){
        blockTable.rows[i].style.display = "none";
    }
}

//控制首页等功能的显示与不显示
function firstLink(){firstSpan.innerHTML = "<a href=‘javascript:firstPage();‘>First</a>";}
function firstText(){firstSpan.innerHTML = "First";}

function preLink(){preSpan.innerHTML = "<a href=‘javascript:prePage();‘>Pre</a>";}
function preText(){preSpan.innerHTML = "Pre";}

function nextLink(){nextSpan.innerHTML = "<a href=‘javascript:nextPage();‘>Next</a>";}
function nextText(){nextSpan.innerHTML = "Next";}

function lastLink(){lastSpan.innerHTML = "<a href=‘javascript:lastPage();‘>Last</a>";}
function lastText(){lastSpan.innerHTML = "Last";}

js+table 实现分页

标签：

原文地址：http://www.cnblogs.com/Faquir/p/5764502.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行