<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test js</title>
</head>
<style>
.page_num{
width: 30px;
height: 10px;
padding: 5px;
border: 2px solid #CCCCCC;
}
.page_wrapper{
margin-top: 20px;
}
.current_page{
background: #CCCCCC;
}
</style>
<body>
<div >
<table width="200" border="1" id="store">
<tr bgcolor="#CCCCCC">
<td>name</td>
<td> </td>
<td> </td>
</tr>
<td>good</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>better</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>best</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>bad</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>worse</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>worst</td>
<td> </td>
<td> </td>
</tr>
</tr>
<td>good</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>better</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>best</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>bad</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>worse</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>worst</td>
<td> </td>
<td> </td>
</tr>
</table>
<div id="store_page" class="page_wrapper"></div>
</body>
<script type="text/javascript">
var option = {
"hastitle": true,//has title or not
"num": 5,//list row number
"id": "store",//the table's id
"page_id": "store_page"//the number page wrapper
};
var storeId = document.getElementById(option.id);//get the table
var rowsLength = storeId.rows.length;// the table all row length
var current_page = 1;// the default page
var page_num = option.num;
var searchText = [];//store all rows
var n = 0;
var titleHtml = "";//store the title row's html ,if it has
if(option.hastitle){//has title, leave out the title row
titleHtml = storeId.rows[0].outerHTML;
for(var i=1;i<rowsLength;i++){
searchText[n] = storeId.rows[i].outerHTML
n++;
}
}else{
for(var i=0;i<rowsLength;i++){
searchText[n] = storeId.rows[i].outerHTML
n++;
}
}
//begin the default show
changePage(current_page);
//change the page num
function changePage(current_page){
changeContent(current_page);
var page_store = document.getElementById(option.page_id);
page_store.innerHTML = "";
for(var p=1;p<=Math.ceil(searchText.length/page_num);p++){
//put the onclick event into the num block
if(current_page == p){
page_store.innerHTML += "<span class='page_num current_page' onclick='changePage(this.innerHTML)'>"+ p +"</span>";
}else{
page_store.innerHTML += "<span class='page_num' onclick='changePage(this.innerHTML)'>"+ p +"</span>";
}
}
}
//turn the page to select page
function changeContent(current_page){
var c_html = '';
var c_page_sum = (current_page*page_num)>searchText.length ? searchText.length : (current_page*page_num);
for(var m=((current_page-1)*page_num);m<c_page_sum;m++){
c_html += searchText[m];
}
var storeId = document.getElementById(option.id);
storeId.innerHTML = ""
storeId.innerHTML = titleHtml+c_html;
}
</script>
</html>
非常簡單的JS分頁效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur