<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./utils.js"></script>
<style>
*{
margin:0;
padding:0;
}
.pagination{
width:600px;
cursor:pointer;
height:80px;
border:2px solid peru;
margin:30px auto;
padding-left:200px;
}
.pagination > span,.pagination > ul > li {
float:left;
line-height:80px;
padding:0 5px;
}
.pagination > ul > li{
list-style:none;
}
.pagination > ul > li.active{
color:rgb(24, 0, 243);
}
table{
width:800px;
margin:0 auto;
text-align:center;
border:1px solid #333;
}
table > tbody > tr:nth-child(odd){
background-color: steelblue;
}
table > tbody > tr:nth-child(even){
background-color: tan;
}
table > tbody > tr{
cursor:pointer;
}
table > tbody > tr:hover{
background-color: #ccc;
color:#fff;
}
</style>
</head>
<body>
<div class="pagination">
<span class="first">Home</span>
<span class="prev">prev</span>
<ul class="pageList">
</ul>
<span class="next">next</span>
<span class="last">Tail</span>
</div>
<table cellspacing="0">
<thead>
<tr>
<th>Number</th>
<th>ID</th>
<th>name</th>
<th>age</th>
<th>gender</th>
<th>class</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>aaa</td>
<td>M</td>
<td>11</td>
<td>2002</td>
<td>
<button>edit</button>
<button>delete</button>
</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>F</td>
<td>22</td>
<td>2020</td>
<td>
<button>edit</button>
<button>delete</button>
</td>
</tr>
</tbody>
</table>
</body>
<script>
var pageList=document.querySelector('.pageList')
var prev=document.querySelector('.prev')
var next=document.querySelector('.next')
var first=document.querySelector('.first')
var last=document.querySelector('.last')
var tbody=document.querySelector('tbody')
var userList=[]
var str1='张王刘马孙赵钱吴'
var str2='一二三四五六七八九十'
var str3='男女'
for(var i=0;i<123;++i){
userList[userList.length]={
id:i+1,
name:str1[randomRange(0,7)]+str2[randomRange(0,9)],
gender:str3[randomRange(0,1)],
age:randomRange(18,44),
class:randomRange(2000,2010)
}
}
var pageNumber=Math.ceil(userList.length/11)
var frg=document.createDocumentFragment()
for(var i=1;i<=pageNumber;i++){
var li=document.createElement('li')
li.innerHTML=i
li.dataset.index=i
if(i===1){li.className="active"}
li.onclick=function(){
console.log(this.dataset.index,typeof this.dataset.index)
currentPage=this.dataset.index-0
bindHTML()
}
frg.appendChild(li)
}
pageList.append(frg)
var currentPage=1;
function bindHTML(){
// [0,10] 1
// [11,21] 2
// [22,32] 3
// [(n-1)*11, n*11-1]
var bindList=userList.slice((currentPage-1)*11,currentPage*11)
console.log(bindList)
var str=''
bindList.forEach(function(value,index,array){
str+=`
<tr>
<td>${index+1}</td>
<td>${value.id}</td>
<td>${value.name}</td>
<td>${value.age}</td>
<td>${value.gender}</td>
<td>${value.class}</td>
<td>
<button>edit</button>
<button>delete</button>
</td>
</tr>
`
tbody.innerHTML=str
changeCurrent()
})
}
bindHTML()
next.onclick=function(){
if(currentPage === pageNumber){return;}
++currentPage
bindHTML()
}
prev.onclick=function(){
if(currentPage === 1){return;}
currentPage--
bindHTML()
}
console.log(first,last)
first.onclick=function(){
if(currentPage === 1){return;}
currentPage=1
bindHTML()
}
last.onclick=function(){
if(currentPage === pageNumber){return;}
currentPage=pageNumber
bindHTML()
}
function changeCurrent(){
for(var i=0;i<pageList.children.length;++i){
pageList.children[i].className=''
}
pageList.children[currentPage-1].className="active"
}
document.onselectstart=function(event){event.preventDefault();}
</script>
</html>
