<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>paging</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
/* border: 1px solid #ddd; /* Gray */
border:1px solid #ddd;
margin-left:3px;
text-align: center;
}
ul.pagination li a:hover {
color: white;
background-color:green;
}
</style>
<script>
var currentNum=1;
var LastNum=10;
var FirstNum=1;
var newLastNum=10;
var newFirstNum=1;
function onload(FirstNum,LastNum,newFirstNum,newLastNum){
var pg= document.getElementById("pagination");
var pgli=document.createElement("li");
var pga=document.createElement("a");
var node=document.createTextNode("<<");
pga.appendChild(node);
pgli.appendChild(pga);
pgli.addEventListener("click",doclick);
pg.appendChild(pgli);
var i=newFirstNum;
for(i;i<=newLastNum;i++){
pgli=document.createElement("li");
pga=document.createElement("a");
node=document.createTextNode(i);
pga.appendChild(node);
//pga.οnclick=doclick(this);
pgli.addEventListener("click",doclick);
pgli.appendChild(pga);
pg.appendChild(pgli);
}
pgli=document.createElement("li");
pga=document.createElement("a");
node=document.createTextNode(">>");
pga.appendChild(node);
pgli.appendChild(pga);
pgli.addEventListener("click",doclick);
pg.appendChild(pgli);
}
function doclick(event){
var num=event.currentTarget.textContent;
var pg= document.getElementById("pagination");
var FirstNum = pg.children[1].textContent;
var LastNum= pg.children[pg.childElementCount-2].textContent;
if(num=="<<"){
var newFirstNum=parseInt(FirstNum)-1;
var newLastNum=parseInt(LastNum)-1;
if(newFirstNum!=0) {
alert(new Date()+" : "+newFirstNum);
changedata(FirstNum,LastNum,newFirstNum,newLastNum);
}else{
alert("No more data than first.");
}
}else if(num==">>"){
var newLastNum=parseInt(LastNum)+1;
var newFirstNum=parseInt(FirstNum)+1;
alert(new Date()+" : "+newLastNum);
changedata(FirstNum,LastNum,newFirstNum,newLastNum);
} else{
currentNum=num;
alert(new Date()+" : "+num);
}
}
function changedata(FirstNum,LastNum,newFirstNum,newLastNum){
var pg= document.getElementById("pagination");
var targ=pg.children;
var cec=pg.childElementCount;
for(var j=cec-1;j>=0;j--){
pg.removeChild(targ[j]);
}
onload(FirstNum,LastNum,newFirstNum,newLastNum);
}
</script>
</head>
<body οnlοad="onload(1,10,1,10)">
<h2> 分頁 和 事件</h2>
<ul id="pagination" class="pagination" >
</ul>
</body>
</html>