制作表格翻页以及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">
        //全局变量
        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(){
          var data=[
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},
            {"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},
            {"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},
            {"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},
            {"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]

            var table=document.getElementById("blocks");
            for(var i=0;i<data.length;i++){
                var row=table.insertRow(table.rows.length);
                var c1=row.insertCell(0);
                c1.innerHTML=data[i].uid;
                var c2=row.insertCell(1);
                c2.innerHTML=data[i].uname;
                var c3=row.insertCell(2);
                c3.innerHTML=data[i].sum;
            }
            //页面标签变量
            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）

            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>uid</th>
          <th>uname</th>
          <th>sum</th>
      </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>
<script type="text/javascript">
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();
      console.log
      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";}
</script>
</body>
</html>

制作表格翻页以及js创建表格

猜你喜欢