javaScript实现表格table分页示例-百分百源码网

javaScript实现表格table分页示例

发布时间：01/15 来源：浏览：关键词：

对于table表格的操作我们可以使用jquery的一款插件来操作了，但有时并不一定喜欢了，下面我们就来看一篇javaScript实现表格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{
        /*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>

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

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

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

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

        <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>
        <span id="spanPre">Pre</span>
        <span id="spanNext">Next</span>
        <span id="spanLast">Last</span>
        The <span id="spanPageNum"></span> Page/Total <span id="spanTotalPage"></span> 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 = "";
    }

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";}

打赏