• html中使用js+table 实现分页


    本文在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{
            /*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="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";}
  • 相关阅读:
    1组Alpha冲刺总结
    1组Beta冲刺4/5
    1组Beta冲刺5/5
    1组Alpha冲刺4/6
    1组Alpha冲刺总结
    1组Beta冲刺2/5
    1组Beta冲刺3/5
    1组Beta冲刺2/5
    1组Alpha冲刺4/6
    1组Alpha冲刺5/6
  • 原文地址:https://www.cnblogs.com/Faquir/p/5764502.html
Copyright © 2020-2023  润新知