Next page

function Page( data) {

// console.log(data);

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

// console.log(da);

// All rows

var num = data. length;

// console.log(num);

// how many rows per page

var pageCount = 7;

// total pages

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

// current page number

var currentPage = 1;

// number of lines beginning

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);