html中使用js+table 實現分頁

時間 2019-11-12

標籤 html 使用 js+table table 實現分頁欄目 HTML 简体版

原文原文鏈接

本文在html中利用js＋table實現分頁。主要思想是先對table中的全部數據隱藏，而後經過當前頁面(currPageNum)來計算當前頁要顯示的行，並顯示出來，首頁、下一頁、上一頁、尾頁都依此來實現。javascript

能夠直接運行。css

1、html頁面html

1. 在頁面中直接向table寫好數據，定義table的id；java

2. 在頁面中加入首頁、上一頁、下一頁、尾頁，當前頁、總頁數等標籤；jquery

3. 在頁面中的javascript部分聲明會用到的變量，並寫好加載函數，window.onload=function(){...}。ide

2、js部分函數

1. 在js文件中依次實現首頁、上一頁、下一頁、尾頁等功能；spa

2. 控制首頁等功能的顯示與不顯示。3d

如下是代碼部分，歡迎批評與指正。code

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" src="jquery-1.11.1.min.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/424784">424784</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-12 01:59:57</td>

            <td class="hidden-phone"><a href="/block-index/1134733/000000000000000002fb51f28a8747636cc7cc2e01a589eb18a13f9a201962e0">000000000000000002fb51f28a8747636cc7cc2e01a589eb18a13f9a201962e0</a></td>
            <td class="hidden-phone">275.59</td>
        </tr>

        <tr>
            <td><a href="/block-height/424782">424782</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-12 01:39:55</td>

            <td class="hidden-phone"><a href="/block-index/1134731/0000000000000000056ead77c44639db8a1db3841092c84415e133a28d2d1826">0000000000000000056ead77c44639db8a1db3841092c84415e133a28d2d1826</a></td>
            <td class="hidden-phone">998.19</td>
        </tr>

        <tr>
            <td><a href="/block-height/424781">424781</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-12 01:38:01</td>

            <td class="hidden-phone"><a href="/block-index/1134730/0000000000000000042dd6ff6e1517d41476edb85214de2ac38c490cfc28d748">0000000000000000042dd6ff6e1517d41476edb85214de2ac38c490cfc28d748</a></td>
            <td class="hidden-phone">270.23</td>
        </tr>

        <tr>
            <td><a href="/block-height/424778">424778</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-12 01:31:07</td>

            <td class="hidden-phone"><a href="/block-index/1134727/00000000000000000383b1b0eda2a2f13b38f762aeecd482af2ca3c82c27792e">00000000000000000383b1b0eda2a2f13b38f762aeecd482af2ca3c82c27792e</a></td>
            <td class="hidden-phone">997.83</td>
        </tr>

        <tr>
            <td><a href="/block-height/424760">424760</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-11 22:52:52</td>

            <td class="hidden-phone"><a href="/block-index/1134709/00000000000000000077be0493ffedc93a439bb30f553a287a39bdd71b3c21e5">00000000000000000077be0493ffedc93a439bb30f553a287a39bdd71b3c21e5</a></td>
            <td class="hidden-phone">638.13</td>
        </tr>

        <tr>
            <td><a href="/block-height/424754">424754</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-11 22:23:47</td>

            <td class="hidden-phone"><a href="/block-index/1134703/000000000000000003e1b4d2f2ef07469f9b1bc741c21acae7c811eef9ad9555">000000000000000003e1b4d2f2ef07469f9b1bc741c21acae7c811eef9ad9555</a></td>
            <td class="hidden-phone">998.05</td>
        </tr>

        <tr>
            <td><a href="/block-height/424749">424749</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-11 21:12:14</td>

            <td class="hidden-phone"><a href="/block-index/1134698/000000000000000000810a12db329d6c60b6d67e7c4a1b2d65212f8f567d7318">000000000000000000810a12db329d6c60b6d67e7c4a1b2d65212f8f567d7318</a></td>
            <td class="hidden-phone">994.33</td>
        </tr>

        <tr>
            <td><a href="/block-height/424732">424732</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-11 18:46:18</td>

            <td class="hidden-phone"><a href="/block-index/1134681/0000000000000000005359eef3594cc9f92da3ac9cf49d27986457788924d634">0000000000000000005359eef3594cc9f92da3ac9cf49d27986457788924d634</a></td>
            <td class="hidden-phone">998.16</td>
        </tr>

        <tr>
            <td><a href="/block-height/424730">424730</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-11 18:36:30</td>

            <td class="hidden-phone"><a href="/block-index/1134679/0000000000000000002e5bacfa2162eab79108c5c8f0c23e344c7b7b7d38b788">0000000000000000002e5bacfa2162eab79108c5c8f0c23e344c7b7b7d38b788</a></td>
            <td class="hidden-phone">998.16</td>
        </tr>

        <tr>
            <td><a href="/block-height/424716">424716</a> <font color="green">(Main Chain)</font></td>
            <td>2016-08-11 16:21:42</td>

            <td class="hidden-phone"><a href="/block-index/1134665/000000000000000004508a2286a0f78b6801b56062d852ea7b17e11b052ef161">000000000000000004508a2286a0f78b6801b56062d852ea7b17e11b052ef161</a></td>
            <td class="hidden-phone">998.03</td>
        </tr>

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

            <td class="hidden-phone"><a href="/block-index/1134659/000000000000000004670d4aa86aeed176cd28cccb3ff1f2dd42a97067d3e24e">000000000000000004670d4aa86aeed176cd28cccb3ff1f2dd42a97067d3e24e</a></td>
            <td class="hidden-phone">0.21</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";}