mysql分页前端实现_js-前端分页效果的实现

html>

Document

body{

padding-top: 40px;

}

table{

width: 600px;

min-height: 100px;

border: 1px red solid;

margin: 0 auto;

border-collapse: collapse;

text-align: center;

}

td,th{

border: 1px red solid;

height: 40px;

}

p{

text-align: center;

}

p span{

padding: 2px 5px;

border: 1px #000 solid;

font-size: 14px;

cursor: pointer;

margin: 0 1px;

}

.active{

background-color: #a9a9cb;

color: #fff;

}

*

编号商品名称*商品规格商品价格*库存量**

// 初始显示第几页

var page = 0;*

var pSpan = '';*

var res;

var tbody = document.getElementById('tbody');

var p = document.getElementById('p');

var xhr = new XMLHttpRequest();

xhr.open('get','php/select.php',true);

xhr.send();

xhr.onload = function(){

if(xhr.status == 200){

res = JSON.parse(xhr.responseText);

// 第二个参数是一页显示多少个

Page(res,3);

}

}

// num是一页显示多少个，page指当前第几页

*function Page(res,num){

var pageNum = Math.ceil(res.length/num);

var str = '';

for(var i=0;i

//索引从0开始，页面从1开始，得加1

str +=`${i+1}`;*

}

p.innerHTML = str;

pSpan = document.querySelectorAll('p span');

active();

var str2 = '';

for(var i=page*num;i

str2 +=`

8

${res[i].id}

${res[i].name}*

${res[i].size}

${res[i].price}

${res[i].stock}

`;

}

tbody.innerHTML = str2;

for(var i = 0;i

pSpan[i].onclick = function(){

page = parseInt(this.innerHTML-1);*

active();

var str2 = '';

for(var i=page*num;i

if(i

str2 +=`

*

${res[i].id}

${res[i].name}*

${res[i].size}

${res[i].price}

${res[i].stock}

`;

}

}

tbody.innerHTML = str2;

}

}

}

// 控制选中和未选中的样式，可以修改对于样式

function active(){

for(var i=0;i

pSpan[i].className = '';

}

pSpan[page].className = 'active';*

}

如果有什么问题，欢迎评论区留言哦