我对分页的理解

1.每次需要展示多少条数据

2.根据每次展示条数进行计算来看需要分多少页

3.需要注意的就是最后数据可能没有达到展示的条数需要进行平滑处理

4.其他就是点击后的背景颜色和数据展示效果

//通过ajax获取数据库内容，这里获取全额数据是为了分页的页码

function selectMysql(){

let arrdata = new Array();

let ajx = new XMLHttpRequest();

let url = ';;

ajx.open('GET',url,false);

ajx.onreadystatechange = function(){

if(ajx.readyState == 4){

if(ajx.status == 200){

arrdata.push(JSON.parse(ajx.responseText)['data'])

}

}

}

ajx.send();

return arrdata;

}

//展示页面的内容的函数，这里我只是做了页面的内容

function loop(a,b){

let AA = selectMysql()[0].slice(a,b)

let table01 = document.getElementById('table01');

//清空表格数据

table01.innerText = "";

table01.innerText = "";

table01.innerText = "";

let tr01 = document.createElement('tr');

table01.appendChild(tr01);

let th = document.createElement('th');

let th1 = document.createElement('th');

let th2 = document.createElement('th');

table01.appendChild(th);

table01.appendChild(th1);

table01.appendChild(th2);

th.innerHTML = '序号';

th1.innerHTML = '颜色';

th2.innerHTML = '英文';

for(let i=0;i<AA.length;i++){

let tr = document.createElement('tr');

table01.appendChild(tr);

let td = document.createElement('td');

let td1 = document.createElement('td');

let td2 = document.createElement('td');

table01.appendChild(td);

table01.appendChild(td1);

table01.appendChild(td2);

td.innerText = AA[i].id;

td1.innerText = AA[i].name;

td2.innerText = AA[i].color;

}

}

//判断多少内容如何展示

function exhibitionMysql(a,b){

if(a == undefined||b == undefined){

loop(0,5)

}else{

if(selectMysql()[0].length - b > 0){

loop(a,b)

}else{

loop(a,selectMysql()[0].length)

}

}

}

//这里是打开页面第一次展示的数据

exhibitionMysql();

//构造函数

function Subscript(){

this.num = selectMysql()[0].length;

this.size = 5;

this.homePage='首页';

this.previousPage="上一页";

this.nextPage="下一页";

this.lastPage="尾页";

this.first = 0;

this.last = 5;

}

//初始化

Subscript.prototype.init = function(){

this.mouse();

this.ulli();

this.mouseonclick();

}

//获取最终展示多少页码

Subscript.prototype.mouse = function(){

this.number = Math.ceil(this.num/this.size);

}

//展示页码

Subscript.prototype.ulli = function(){

let ul = document.getElementById('ul1');

let homePageli = document.createElement('li');

ul.appendChild(homePageli);

homePageli.innerText = this.homePage;

let previousPageli = document.createElement('li');

ul.appendChild(previousPageli);

previousPageli.innerText = this.previousPage;

for (let i=0;i<Math.ceil(selectMysql()[0].length/this.size);i++){

let li1 = document.createElement('li');

ul.appendChild(li1);

let str=(i+1);

li1.id = 'li01';

li1.innerText = str;

}

let nextPageli = document.createElement('li');

ul.appendChild(nextPageli);

nextPageli.innerText = this.nextPage;

let lastPageli = document.createElement('li');

ul.appendChild(lastPageli);

lastPageli.innerText = this.lastPage;

}

//点击获取所点击的内容并且传值，这里我只是传给了页面展示的函数并没再次做构造函数进行覆盖

Subscript.prototype.mouseonclick = function(){

document.getElementById('ul1').addEventListener('click',function(e){

let prve = document.getElementsByTagName('li')

let name = e.target.innerText;

let first = (Number(name)-1)*5;

let last = first+5;

exhibitionMysql(first,last);

//这里是首先把所有页码背景颜色清空，每次执行都要清空

for(let i=0;i<prve.length;i++){

prve[i].style.background = "";

prve[i].style.color = "";

}

//然后，点击后获取页码

e.target.style.backgroundColor = "yellow";

e.target.style.color = 'blue';

})

}

//初始化构造函数

let exhibition = new Subscript();

exhibition.init();