js分页
学习之作---如图
html部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example: Pagination</title>
<style type="text/css">
@import 'style/page.css';
</style>
<script language="javascript" type="text/javascript" src="js/DOMhelp.js"></script>
<script language="javascript" type="text/javascript" src="js/pagination.js"></script>
</head>
<body>
<table class="paginated">
<thead>
<tr>
<td scope="col">ID</td>
<td scope="col">Artist</td>
<td scope="col">Album</td>
<td scope="col">Comment</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>2</td>
<td>Monty Python</td>
<td>The final Rip-Off</td>
<td>Duble CD with all the songs</td>
</tr>
<tr>
<td>3</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>4</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>5</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>6</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>7</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>8</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>9</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>10</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>11</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>4</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>5</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>6</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>7</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>8</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>9</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>10</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
<tr>
<td>11</td>
<td>Depeche Mode</td>
<td>Playing the Angel</td>
<td>They are back and finally up to speed again</td>
</tr>
</tbody>
</table>
</body>
</html>
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.paginated{
width:300px;
font-size:.8em;
font-family:arial,sans-serif;
border:1px solid #ccc;
border-bottom:none;
border-right:none;
}
table.paginated td,table.paginated th{
border:1px solid #ccc;
border-top:none;
border-left:none;
}
p.paginatedNav{
font-size:.8em;
font-family:arial,sans-serif;
width:280px;
padding:.5em 10px;
margin:0;
text-align:right;
font-weight:bold;
}
p.paginatedNav a{
color:#ccc;
}
p.paginatedNav a:link,
p.paginatedNav a:visited
{
color:#369;
}
js部分
DOMhelp.js可以参考上一篇关于js的博客，这里用的是与上一个博客文章相同的js文件
pagination.js
pn = {
//CSS classes
paginationClass:'paginated',
dynamicClass:'dynamic',
showClass:'show',
paginationNavClass:'paginatedNav',
//pagination counter properties
//Number of elements shown on one page
increase:5,
//Counter:_x_ will become the current start position
// _y_the current end position and
// _z_ the number of all data rpws
counter: ' _x_ to _y_ of _z_ ',
//"previous" and "next" links, only text is allowed
nextLabel:'next',
previousLabel:'previous',
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.bottomPrev.onclick = DOMhelp.safariClickFix;
table.topNext.onclick = DOMhelp.safariClickFix;
table.topPrev.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 && 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);