分页器
HTML
<!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="./pagination.js"></script>
<style>
*{margin:0;padding:0;}
.box{
width:900px;
height:80px;
border:1px solid #333;
margin:50px auto;
position:relative;
}
.pagination{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="box">
<div class="pagination"></div>
</div>
<ul></ul>
<script>
var ul=document.querySelector('ul')
var arr=[]
for(let i=0;i<200;++i){
arr.push({name:'uiop',age:i})
}
var p=new Pagination('.pagination',{
gross:200,
pageSize:10,
callback(presentPage){
console.log('presentPage',presentPage)
const tmpArray=arr.slice((presentPage-1)*10,presentPage*10)
ul.innerHTML=''
console.log('tmpArray',tmpArray)
for(let i=0;i<10;++i){
const li=document.createElement('li')
li.innerHTML=`name: ${tmpArray[i].name}, age: ${tmpArray[i].age}`
ul.appendChild(li)
}
}
})
</script>
</body>
</html>
js
class Pagination{
constructor(elem,options={}){
this.elem=document.querySelector(elem)
this.default={
presentPage:options.presentPage || 1,
gross:options.gross || 90,
pageSize:options.pageSize || 10,
first:options.first || 'first',
prev:options.prev || 'prev',
next:options.next || 'next',
last:options.last || 'last',
go:options.go || 'GO!',
callback:options.callback || (()=>{})
}
this.default.pageNumber=Math.ceil(this.default.gross/this.default.pageSize)
this.buttonCSS={
float:'left',
padding:'5px',
margin:'5px',
border:'1px solid #333',
cursor:'grabbing'
}
console.log('pageNumber: ',this.default.pageNumber)
this.init()
}
init(){
this.renderHTML()
this.renderBox()
this.bindEvent()
}
renderBox(){
defineCSS(this.elem,{
height:'50px',
padding:'10px 30px 0',
position:'absolute'
})
}
renderHTML(){
const { first, prev, next, last, presentPage }=this.default
const frg=document.createDocumentFragment()
frg.appendChild(defineCSS(createElem('div','first',first),this.buttonCSS))
frg.appendChild(defineCSS(createElem('div','prev',prev),this.buttonCSS))
const list=defineCSS(createElem('div','list',''),{margin:0,padding:0,float:'left'})
list.appendChild(this.createItem())
frg.appendChild(list)
frg.appendChild(defineCSS(createElem('div','next',next),this.buttonCSS))
frg.appendChild(defineCSS(createElem('div','last',last),this.buttonCSS))
const jump=defineCSS(createElem('div','jump',''),{margin:0,padding:0,float:'left'})
jump.appendChild(this.createJump())
frg.appendChild(jump)
this.elem.innerHTML=''
this.elem.appendChild(frg)
console.log('render: '+presentPage)
this.default.callback(presentPage)
}
createItem(){
const { presentPage, pageNumber }=this.default
const frg=document.createDocumentFragment()
if(pageNumber<=9){
for(let i=0;i<9;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
if(i+1===presentPage) defineCSS(p,{backgroundColor:'orange'})
frg.appendChild(p)
}
return frg
}
const suspension=document.createElement('p')
suspension.innerHTML='...'
defineCSS(suspension,{
margin:'5px',
padding:'5px',
float:'left',
cursor:'not-allowed',
})
// 当 presentPage < 5 的时候, 1 2 3 4 5 ... 99 100
if(presentPage<5){
for(let i=0;i<5;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
if(i+1===presentPage) defineCSS(p,{backgroundColor:'orange'})
frg.appendChild(p)
}
frg.appendChild(suspension.cloneNode(true))
for(let i=pageNumber-2;i<pageNumber;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
}
// 当 presentPage === 5 的时候, 1 2 3 4 5 6 7 ... 99 100
if(presentPage===5){
for(let i=0;i<7;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
frg.appendChild(suspension.cloneNode(true))
for(let i=pageNumber-2;i<pageNumber;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
}
// 当 presentPage > 5 && presentPage < 到数第五个 的时候, 1 2 ... 5 6 current 8 9 ... 99 100
if(presentPage>5 && presentPage<pageNumber-4){
for(let i=0;i<2;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
frg.appendChild(suspension.cloneNode(true))
for(let i=presentPage-3;i<presentPage+2;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
frg.appendChild(suspension.cloneNode(true))
for(let i=pageNumber-2;i<pageNumber;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
}
// 当 presentPage == 到数第五个 的时候, 1 2 ... 94 95 current 97 98 99 100
if(presentPage === pageNumber-4){
for(let i=0;i<2;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
frg.appendChild(suspension.cloneNode(true))
for(let i=pageNumber-7;i<pageNumber;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
}
// 当 presentPage > 到数第五个 的时候, 1 2 ... current 97 98 99 100
if(presentPage>pageNumber-4){
for(let i=0;i<2;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
frg.appendChild(suspension.cloneNode(true))
for(let i=presentPage-1;i<pageNumber;++i){
const p=defineCSS(createElem('p','item',i+1),this.buttonCSS)
p.dataset.index=i
frg.appendChild(p)
}
}
return frg
}
createJump(){
const { go, presentPage }=this.default
const frg=document.createDocumentFragment()
const input=document.createElement('input')
input.value=presentPage
input.className='input'
defineCSS(input,{
height:'28px',
width:'30px',
float:'left',
outline:'none',
margin:'5px',
cursor:'not-allowed'
})
const button=document.createElement('button')
button.className='go'
defineCSS(button,{
height:'30px',
width:'30px',
float:'left',
outline:'none',
margin:'5px',
cursor:'move'
})
button.innerHTML=go
frg.appendChild(input)
frg.appendChild(button)
return frg
}
bindEvent(){
this.elem.addEventListener('keydown',e=>{
const { presentPage, pageNumber }=this.default
if(e.target.className==='input' && e.key==='Enter'){
console.log(e,e.target,e.target.value)
let index=e.target.value/1
console.log(e.key,e.keyCode,typeof index)
if(index===presentPage) return;
console.log('executed 111111111111111')
if(index<1) index=1
if(index>pageNumber) index=pageNumber
this.default.presentPage=index
this.renderHTML()
}
})
this.elem.addEventListener('click',e=>{
const { presentPage, pageNumber }=this.default
if(e.target.className==='prev' && presentPage>1){
this.default.presentPage--
this.renderHTML()
}
if(e.target.className==='next' && presentPage<pageNumber){
this.default.presentPage++
this.renderHTML()
}
if(e.target.className==='first' && presentPage>1){
this.default.presentPage=1
this.renderHTML()
}
if(e.target.className==='last' && presentPage<pageNumber){
this.default.presentPage=pageNumber
this.renderHTML()
}
if(e.target.className==='item'){
const index=e.target.dataset.index-0+1 // 调整presentPage
if(index===this.default.presentPage) return;
this.default.presentPage=index
this.renderHTML()
}
if(e.target.className==='go'){
const index=e.target.previousElementSibling.value-0
if(index<1) index=1
if(index>pageNumber) index=pageNumber
if(index===this.default.presentPage) return;
this.default.presentPage=index
this.renderHTML()
}
})
}
}
function createElem(nodeName,className,text){
const elem=document.createElement(nodeName)
elem.classList.add(className)
elem.innerHTML=text
return elem
}
function defineCSS(elem,styles){
for(let key in styles){
elem.style[key]=styles[key]
}
return elem
}
