利用js实现静态分页

博客 - JS/Ajax/AS

利用js实现静态分页

　　由于工作上的需要，做了个用js分页的效果。不牵涉到服务器端的语言，所以只有用js来分页。

　　把demo提供给大家，原本调xml文档的部分，这里就不提供了。

下载: code1.html

<!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>js实现静态分页</title>
<style type="text/css">
table.dynamic tbody tr{ display:none;}
table.dynamic tbody tr.show{display:block;}
html>body table.dynamic tbody tr.show{ display:table-row;}
th,td{ padding:5px;}
th{ background:#eef;}
table.pagelist{ border:1px solid #ccc; border-bottom:none; border-right:none; width:500px;}
table.pagelist td,table.pagelist th{ font-size:12px; border:1px solid #ccc; border-top:none; border-left:none;}
p.paginatedNav{ font-size:12px; width:480px; margin-top:8px; text-align:right;}
p.paginatedNav a{ color:#ccc;}
p.paginatedNav a:link,p.paginatedNav a:visited{ color:#369;}
</style>
<script type="text/javascript" src="http://www.11gz.com/DOMhelp.js"></script>
<script type="text/javascript"><!--
pn = {
//css class
paginationClass:'pagelist',
dynamicClass:'dynamic',
showClass:'show',
paginationNavClass:'paginatedNav',
//设置每页显示数据条数
increase : 5,
//分页导航的替换文本
counter:'  _x_到_y_条  共_z_条  ',
nextLabel:'下一页',
previousLabel:'上一页',
init:function(){
var tablebody;
if(!document.getElementById || !document.createTextNode){return;}
var ts=document.getElementsByTagName('table');
for(var i=0;i<ts.length;i++){
if(!DOMhelp.cssjs('check',ts[i],pn.paginationClass)){continue;}
if(ts[i].getElementsByTagName('tr').length<pn.increase+1){continue;}
tablebody=ts[i].getElementsByTagName('tbody')[0];
ts[i].datarows=tablebody.getElementsByTagName('tr');
ts[i].datarowsize=ts[i].datarows.length;
ts[i].current=null;
DOMhelp.cssjs('add',ts[i],pn.dynamicClass);
pn.createPaginationNav(ts[i]);
pn.showSection(ts[i],0);
}
},
createPaginationNav:function(table){
var navBefore,navAfter;
navBefore=document.createElement('p');
DOMhelp.cssjs('add',navBefore,pn.paginationNavClass);
navBefore.appendChild(DOMhelp.createLink('#',pn.previousLabel));
navBefore.appendChild(document.createElement('span'));
counter=pn.counter.replace('_x_',1);
counter=counter.replace('_y_',pn.increase);
counter=counter.replace('_z_',table.datarowsize-1);
navBefore.getElementsByTagName('span')[0].innerHTML=counter;
navBefore.appendChild(DOMhelp.createLink('#',pn.nextLabel));
table.parentNode.insertBefore(navBefore,table);
navAfter=navBefore.cloneNode(true);
table.parentNode.insertBefore(navAfter,table.nextSibling);
table.topPrev=navBefore.getElementsByTagName('a')[0];
table.topNext=navBefore.getElementsByTagName('a')[1];
table.bottomPrev=navAfter.getElementsByTagName('a')[0];
table.bottomNext=navAfter.getElementsByTagName('a')[1];
DOMhelp.addEvent(table.topPrev,'click',pn.navigate,false);
DOMhelp.addEvent(table.bottomPrev,'click',pn.navigate,false);
DOMhelp.addEvent(table.topNext,'click',pn.navigate,false);
DOMhelp.addEvent(table.bottomNext,'click',pn.navigate,false);
table.bottomNext.onclick=DOMhelp.safariClickFix;
table.topPrev.onclick=DOMhelp.safariClickFix;
table.bottomPrev.onclick=DOMhelp.safariClickFix;
table.topNext.onclick=DOMhelp.safariClickFix;
table.topCounter=navBefore.getElementsByTagName('span')[0];
table.bottomCounter=navAfter.getElementsByTagName('span')[0];
},
navigate:function(e){
var start, table;
var t=DOMhelp.getTarget(e);
while(t.nodeName.toLowerCase()!='a'){t=t.parentNode;}
if(t.getAttribute('href') == null || t.getAttribute('href') == ''){return;}
if(t.parentNode.previousSibling.nodeName.toLowerCase() == 'table'){
table=t.parentNode.previousSibling;
}else{
table=t.parentNode.nextSibling;
}
if(t==table.topNext || t==table.bottomNext){
start=table.current+pn.increase;
}else if(t==table.topPrev || t==table.bottomPrev){
start=table.current-pn.increase;
}
pn.showSection(table,start)
},
showSection:function(table,start){
var i;
pn.changePaginationNav(table,start);
if(table.current!=null){
for(i=table.current;i<table.current+pn.increase;i++){
if(table.datarows[i]){
DOMhelp.cssjs('remove',table.datarows[i],pn.showClass);
}
}
}
for(i=start;i<start+pn.increase;i++){
if(table.datarows[i]){
DOMhelp.cssjs('add',table.datarows[i],pn.showClass);
}
}
table.current=start;
},
changePaginationNav:function(table,start){
if(start-pn.increase<0){
table.bottomPrev.removeAttribute('href');
table.topPrev.removeAttribute('href');
}else{
table.bottomPrev.setAttribute('href','#');
table.topPrev.setAttribute('href','#');
}
if(start+pn.increase>table.datarowsize-2){
table.bottomNext.removeAttribute('href');
table.topNext.removeAttribute('href');
}else{
table.bottomNext.setAttribute('href','#');
table.topNext.setAttribute('href','#');
}
var counter=pn.counter.replace('_x_',start+1);
var last=start+pn.increase;
if(last>table.datarowsize){last=table.datarowsize;}
counter=counter.replace('_y_',last);
counter=counter.replace('_z_',table.datarowsize);
table.topCounter.innerHTML=counter;
table.bottomCounter.innerHTML=counter;
}
}
DOMhelp.addEvent(window,'load',pn.init,false);
-->
</script>
</head>
<body>
<table class="pagelist" cellspacing="0" cellpadding="0">
<thead>
<tr><th scope="col">ID</th><th scope="col">作者</th><th scope="col">标题</th><th scope="col">介绍</th></tr>
</thead>
<tbody>
<tr><th>1</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>2</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>3</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>4</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>5</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>6</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>7</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>8</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>9</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>10</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>11</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>12</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>13</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>14</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>15</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>16</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>17</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>18</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>19</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>20</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
<tr><th>21</th><td>萧涤非等著</td><td>唐诗鉴赏辞典</td><td>《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</td></tr>
<tr><th>22</th><td>左民安</td><td>细说汉字（精装版）</td><td>这是一本介绍汉字基本知识的通俗读物</td></tr>
</tbody>
</table>
</body>
</html>