製作表格翻頁以及js建立表格
阿新 • • 發佈：2018-12-29
<!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>
<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>