翻页

function Page(data) {

// console.log(data);

// var da = document.querySelectorAll('div.Data>ul');

// console.log(da);

// 所有行数

var num = data.length;

// console.log(num);

// 每一页多少行

var pageCount = 7;

// 总页数

var totalPage = Math.ceil(num / pageCount);

// 当前页数

var currentPage = 1;

// 开始的行数

var start = (currentPage - 1) * pageCount + 1;

// 结束的行数

var end = currentPage * pageCount;

end = (end > num) ? num : end;

// console.log(start);

// console.log(end);

// 判断分多少页

if (num / pageCount > parseInt(num / pageCount)) {

totalPage = parseInt(num / pageCount) + 1;

} else {

totalPage = num / pageCount;

}

// console.log(totalPage);

var foot = document.getElementsByClassName('foot')[0];

// console.log(foot);

var ul = document.createElement('ul');

foot.appendChild(ul);

// 上一页

var li1 = document.createElement('li')

li1.innerHTML = '<button class="btn">上一页</botton>';

li1.getElementsByTagName("button")[0].onclick = function() {

// 判断当是第一页的时候，再点击上一页, 页码不会变

if (currentPage == 1) {

currentPage;

} else {

currentPage--;

pageChange();

}

}

// 下一页

var li2 = document.createElement('li')

li2.innerHTML = '<button class="btn">下一页</botton>';

li2.getElementsByTagName("button")[0].onclick = function() {

// 判断当是最后一页的时候，再点击下一页, 页码不会变

if (currentPage < totalPage) {

currentPage++;

pageChange();

} else {

currentPage;

}

}

ul.appendChild(li1);

ul.appendChild(li2);

// console.log(ul);

// 将按钮加入进来

for (var i = 1; i < totalPage + 1; i++) {

var li3 = document.createElement('li');

var button = document.createElement("button");

button.className = "btn2";

button.innerHTML = i;

button.onclick = function() {

currentPage = Number(this.innerHTML);

pageChange();

// 点击上一页 下一页时页码会跟随变动

var btn2s = document.getElementsByClassName("btn2");

for (var i = 0; i < btn2s.length; i++) {

btn2s[i].style.backgroundColor = "antiquewhite";

}

this.style.backgroundColor = 'red';

}

li3.append(button);

ul.appendChild(li3);

}

// console.log(ul);

// 当页码改变

function pageChange() {

var foot_btns = foot.getElementsByTagName("button");

// 点击对应按钮 背景颜色会改变

for (var i = 2; i < foot_btns.length; i++) {

foot_btns[i].style.backgroundColor = "antiquewhite";

// 默认第二个为红色

foot_btns[currentPage + 1].style.backgroundColor = "red";

}

// 清除最后一页显示的问题

pageCount = 7;

// 总条数 - 当前页*每页的条数 < 0

// 每页的条数 = 总条数 - (总页数-1)*每页的条数

if (num - (pageCount * currentPage) < 0) {

pageCount = num - (totalPage - 1) * pageCount;

}

var currentinfo = [];

for (var i = (currentPage - 1) * pageCount; i < currentPage * pageCount; i++) {

currentinfo.push(data[i]);

}

showInfo(currentinfo);

}

pageChange();

}

Page(data);

function Page(data) {

// console.log(data);

// var da = document.querySelectorAll('div.Data>ul');

// console.log(da);

// 所有行数

var num = data.length;

// console.log(num);

// 每一页多少行

var pageCount = 7;

// 总页数

var totalPage = Math.ceil(num / pageCount);

// 当前页数

var currentPage = 1;

// 开始的行数

var start = (currentPage - 1) * pageCount + 1;

// 结束的行数

var end = currentPage * pageCount;

end = (end > num) ? num : end;

// console.log(start);

// console.log(end);

// 判断分多少页

if (num / pageCount > parseInt(num / pageCount)) {

totalPage = parseInt(num / pageCount) + 1;

} else {

totalPage = num / pageCount;

}

// console.log(totalPage);

var foot = document.getElementsByClassName('foot')[0];

// console.log(foot);

var ul = document.createElement('ul');

foot.appendChild(ul);

// 上一页

var li1 = document.createElement('li')

li1.innerHTML = '<button class="btn">上一页</botton>';

li1.getElementsByTagName("button")[0].onclick = function() {

if (currentPage == 1) {

currentPage;

} else {

currentPage--;

pageChange();

}

}

// 下一页

var li2 = document.createElement('li')

li2.innerHTML = '<button class="btn">下一页</botton>';

li2.getElementsByTagName("button")[0].onclick = function() {

if (currentPage < totalPage) {

currentPage++;

pageChange();

} else {

currentPage;

}

}

ul.appendChild(li1);

ul.appendChild(li2);

// console.log(ul);

for (var i = 1; i < totalPage + 1; i++) {

var li3 = document.createElement('li');

var button = document.createElement("button");

button.className = "btn2";

button.innerHTML = i;

button.onclick = function() {

currentPage = Number(this.innerHTML);

pageChange();

var btn2s = document.getElementsByClassName("btn2");

for (var i = 0; i < btn2s.length; i++) {

btn2s[i].style.backgroundColor = "antiquewhite";

}

this.style.backgroundColor = 'red';

}

li3.append(button);

ul.appendChild(li3);

}

// console.log(ul);

function pageChange() {

var foot_btns = foot.getElementsByTagName("button");

for (var i = 2; i < foot_btns.length; i++) {

foot_btns[i].style.backgroundColor = "antiquewhite";

// 默认第二个为红色

foot_btns[currentPage + 1].style.backgroundColor = "red";

}

// 清除最后一页显示的问题

pageCount = 7;

// 总条数 - 当前页*每页的条数 < 0

// 每页的条数 = 总条数 - (总页数-1)*每页的条数

if (num - (pageCount * currentPage) < 0) {

pageCount = num - (totalPage - 1) * pageCount;

}

// 便利显示数据实现分页

var currentinfo = [];

for (var i = (currentPage - 1) * pageCount; i < currentPage * pageCount; i++) {

currentinfo.push(data[i]);

}

showInfo(currentinfo);

}

pageChange();

}

Page(data);