思路：
1.講表格內(nèi)容存入一個(gè)變量
2.通過(guò)點(diǎn)擊按鈕從表格中調(diào)取數(shù)據(jù)
3.講調(diào)取的數(shù)據(jù)填入表格中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格分頁(yè)</title>
<style>
html,body {
margin:0;
height:100%;
}
.barcon {
width:auto;
margin:0 auto;
text-align:center;
}
.barcon1 {
font-size:17px;
float:left;
margin-top:20px;
}
.barcon2 {
float:right;
}
.barcon2 ul {
margin:20px 0;
padding-left:0;
list-style:none;
text-align:center;
}
.barcon2 li {
display:inline;
}
.barcon2 a {
font-size:16px;
font-weight:normal;
display:inline-block;
padding:5px;
padding-top:0;
color:black;
border:1px solid #ddd;
background-color:#fff;
}
.barcon2 a:hover {
background-color:#eee;
}
.ban {
opacity:.4;
}
#shade {
background:#000;
filter:alpha(opacity=50);/* IE的透明度*/
opacity:0.5;/* 透明度*/
display:none;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:9999;/* 此處的圖層要大于頁(yè)面*/
display:none;
}
</style>
</head>
<body>
<table >
<thead>
<tr>
<th>ID</th>
<th>菜單</th>
<th>鏈接地址</th>
<th>父菜單</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<div id="barcon" class="barcon">
<div id="barcon1" class="barcon1"></div>
<div id="barcon2" class="barcon2">
<ul>
<li><a href="###" id="firstPage">首頁(yè)</a></li>
<li><a href="###" id="prePage">上一頁(yè)</a></li>
<li><a href="###" id="nextPage">下一頁(yè)</a></li>
<li><a href="###" id="lastPage">尾頁(yè)</a></li>
<li><select id="jumpWhere">
</select></li>
<li><a href="###" id="jumpPage" onclick="jumpPage()">跳轉(zhuǎn)</a></li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
var table;
table = [
{
"id":"21",
"name":"演唱會(huì)",
"parent_id":"15",
"url":"http://www.acfun.cn/v/list99/index.htm/v/list140/index.htm"
},
{
"id":"22",
"name":"舞蹈·彼女",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list123/index.htm"
},
{
"id":"23",
"name":"宅舞",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list134/index.htm"
},
{
"id":"24",
"name":"綜合舞蹈",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list135/index.htm"
},
{
"id":"25",
"name":"愛(ài)豆",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list129/index.htm"
},
{
"id":"26",
"name":"手作",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list130/index.htm"
},
{
"id":"27",
"name":"造型",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list127/index.htm"
},
{
"id":"28",
"name":"游戲",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"29",
"name":"主機(jī)單機(jī)",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"30",
"name":"游戲集錦",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"31",
"name":"電子競(jìng)技",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"32",
"name":"英雄聯(lián)盟",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"33",
"name":"守望先鋒",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list170/index.htm"
},
{
"id":"34",
"name":"桌游卡牌",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list165/index.htm/"
},
{
"id":"35",
"name":"Mugen",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list72/index.htm/"
},
{
"id":"36",
"name":"游戲中心",
"parent_id":"28",
"url":"http://www.acfun.cn/gamecenter"
},
{
"id":"37",
"name":"娛樂(lè)",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"38",
"name":"生活?yuàn)蕵?lè)",
"parent_id":"37",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"39",
"name":"鬼畜調(diào)教",
"parent_id":"37",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"40",
"name":"萌寵",
"parent_id":"37",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"41",
"name":"美食",
"parent_id":"37",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"42",
"name":"科技",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"43",
"name":"科學(xué)技術(shù)",
"parent_id":"42",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"44",
"name":"教程",
"parent_id":"42",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"45",
"name":"數(shù)碼",
"parent_id":"42",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"46",
"name":"廣告",
"parent_id":"42",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"47",
"name":"影視",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"48",
"name":"國(guó)產(chǎn)劇",
"parent_id":"47",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"49",
"name":"網(wǎng)絡(luò)劇",
"parent_id":"47",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"50",
"name":"紀(jì)錄片",
"parent_id":"47",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"51",
"name":"綜藝",
"parent_id":"47",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"52",
"name":"文章",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"53",
"name":"游記·涂鴉",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"54",
"name":"綜合",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"55",
"name":"工作·情感",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"56",
"name":"動(dòng)漫文化",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"57",
"name":"漫畫(huà)·文學(xué)",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list170/index.htm"
}
]
starpag();
function starpag() {
goPage(1,20);
var tempOption ="";
for (var i =1;i <=totalPage;i++) {
tempOption +='<option value=' +i +'>' +i +''
}
$("#jumpWhere").html(tempOption);
};
// 分頁(yè)函數(shù)
// pno--頁(yè)數(shù)
// psize--每頁(yè)顯示記錄數(shù)
// 分頁(yè)部分是從真實(shí)數(shù)據(jù)行開(kāi)始，因而存在加減某個(gè)常數(shù)，以確定真正的記錄數(shù)
// 純js分頁(yè)實(shí)質(zhì)是數(shù)據(jù)行全部加載，通過(guò)是否顯示屬性完成分頁(yè)功能
var pageSize =0;//每頁(yè)顯示行數(shù)
var currentPage_ =1;//當(dāng)前頁(yè)全局變量，用于跳轉(zhuǎn)時(shí)判斷是否在相同頁(yè)，在就不跳，否則跳轉(zhuǎn)。
var totalPage;//總頁(yè)數(shù)
function goPage(pno, psize) {
var num =table.length;//表格所有行數(shù)(所有記錄數(shù))
pageSize = psize;//每頁(yè)顯示行數(shù)
//總共分幾頁(yè)
if (num /pageSize >parseInt(num /pageSize)) {
totalPage =parseInt(num /pageSize) +1;
}else {
totalPage =parseInt(num /pageSize);
}
var currentPage = pno;//當(dāng)前頁(yè)數(shù)
currentPage_ =currentPage;
var startRow = (currentPage -1) *pageSize +1;
var endRow =currentPage *pageSize;
endRow = (endRow >num) ?num :endRow;
// console.log(endRow);
var tablepag =new Array();
for (let index =startRow;index <=endRow;index++) {
tablepag.push(table[index -1])
}
tabletr(tablepag);
var tempStr ="共" +num +"條記錄 共分" +totalPage +"頁(yè) 當(dāng)前第" +currentPage +"頁(yè)";
document.getElementById("barcon1").innerHTML =tempStr;
if (currentPage >1) {
$("#firstPage").on("click",function () {
goPage(1, psize);
}).removeClass("ban");
$("#prePage").on("click",function () {
goPage(currentPage -1, psize);
}).removeClass("ban");
}else {
$("#firstPage").off("click").addClass("ban");
$("#prePage").off("click").addClass("ban");
}
if (currentPage
$("#nextPage").on("click",function () {
goPage(currentPage +1, psize);
}).removeClass("ban");
$("#lastPage").on("click",function () {
goPage(totalPage, psize);
}).removeClass("ban");
}else {
$("#nextPage").off("click").addClass("ban");
$("#lastPage").off("click").addClass("ban");
}
$("#jumpWhere").val(currentPage);
}
function jumpPage() {
var num =parseInt($("#jumpWhere").val());
if (num !=currentPage_) {
goPage(num,pageSize);
}
}
function tabletr(arr) {
var htm ='';
for (let index =0;index < arr.length;index++) {
htm +='<tr>' +
'<td>' + arr[index].id +'</td>' +
'<td>' + arr[index].name +'</td>' +
'<td>' + arr[index].url +'</td>' +
'<td>' + arr[index].parent_id +'</td>' +
'<td>' +
'</tr>';
}
$("#list").html(htm);
}
</script>
</body>
</html>
