JavaScript Day 8
上课日期：2019年8月22日
课程内容
案例：数据分页
数据分页常见于各种前端页面，比如显示所有学生信息，信息数量庞大，而单页所能显示的数量有限，那么就需要用到数据分页这个功能，如下案例就是对一些模拟后台数据进行分页的一个样例。
<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title>数据分页</title>
<script src="js/data.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.data-items {
width: 1000px;
height: 500px;
border: 1px solid black;
margin: auto;
position: relative;
}
.data-title {
height: 35px;
}
.data-title ul {
display: flex;
flex-direction: row;
text-align: center;
background: linear-gradient(180deg, #0efff8, #1ca3ff);
}
.data-title li {
list-style: none;
flex: 1;
line-height: 35px;
}
.data-nav {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
}
.data-nav button {
border: 1px solid silver;
outline: none;
background: transparent;
font-size: 13px;
width: 70px;
height: 25px;
vertical-align: middle;
}
.data-nav ul {
display: inline-block;
vertical-align: middle;
}
.data-nav li {
list-style: none;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
display: inline-block;
border: 1px solid silver;
box-sizing: border-box;
cursor: pointer;
}
.data-info {
height: 420px;
display: flex;
flex-direction: column;
}
.data-info > div {
height: 40px;
display: flex;
flex-direction: row;
border-bottom: 1px solid silver;
align-items: center;
}
.data-info > div:hover {
background: #23e1ff;
color: deeppink;
}
.data-info > div > div {
flex: 1;
text-align: center;
}
.span-page {
display: inline-block;
margin-left: 20px;
font-size: 14px;
}
.span-go {
font-size: 14px;
margin-left: 20px;
}
.span-go input {
outline: none;
width: 25px;
text-align: center;
}
.go {
margin: 0 10px;
}
.colorbg {
background: #1cacff;
color: #fff;
}
</style>
</head>
<body>
<div class="data-items">
<div class="data-title">
<ul>
<li>序号</li>
<li>姓名</li>
<li>年龄</li>
<li>性别</li>
<li>邮箱</li>
<li>QQ</li>
<li>地址</li>
</ul>
</div>
<div class="data-info">
</div>
<div class="data-nav">
<button class="btnup">上一页</button>
<ul class="nav">
<li class="colorbg">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button class="btndown">下一页</button>
<span class="span-page">总共：<span class="totle">0</span>页</span>
<span class="span-go">
跳到：
<input type="text" class="num" value="1"/>
页
</span>
<button class="go">Go</button>
</div>
</div>
<script>
/*
* 数据分页 纯前端分页 （返回数据自己实现） 后端分页 传给后天当前页 和 一页显示多少条数据
* */
var pageFen = {
nowpage: 1,
pageNumber: 10,
totlePage: 0,
allData: null,
nowPageData: [],
savechangeLi: null,//记录当前li变色
isshownav: false,
getAllData: function () {
//获取后端数据
return this.allData = data;
},
saveTotle: function () {
//计算总页码
this.totlePage = Math.ceil(this.allData.length / this.pageNumber);
},
getNowPageData: function (now) {
this.nowpage = now;
this.nowPageData = this.allData.slice((this.nowpage - 1) * this.pageNumber, this.nowpage * this.pageNumber);
},
renderData: function () {
//处理之前页的数据
this.parEle.innerHTML = "";
//遍历数据
for (var index in this.nowPageData) {
var divele = document.createElement("div");
this.parEle.appendChild(divele);
var divcol1 = document.createElement("div");
divcol1.innerHTML = this.nowPageData[index].id;
var divcol2 = document.createElement("div");
divcol2.innerHTML = this.nowPageData[index].name;
var divcol3 = document.createElement("div");
divcol3.innerHTML = this.nowPageData[index].age;
var divcol4 = document.createElement("div");
divcol4.innerHTML = this.nowPageData[index].sex;
var divcol5 = document.createElement("div");
divcol5.innerHTML = this.nowPageData[index].email;
var divcol6 = document.createElement("div");
divcol6.innerHTML = this.nowPageData[index].QQ;
var divcol7 = document.createElement("div");
divcol7.innerHTML = this.nowPageData[index].address;
divele.appendChild(divcol1);
divele.appendChild(divcol2);
divele.appendChild(divcol3);
divele.appendChild(divcol4);
divele.appendChild(divcol5);
divele.appendChild(divcol6);
divele.appendChild(divcol7);
}
},
addEventLi: function () {
var that = this;
for (var i = 0; i < this.liItem.length; i++) {
this.liItem[i].onclick = function () {
that.savechangeLi.className = "";
this.className = "colorbg";
that.savechangeLi = this;
//获取当前点击页的数据
that.getNowPageData(this.innerHTML);
that.renderData();
that.nowpage = parseInt(this.innerHTML);
}
}
},
addEventBtn: function () {
var that = this;
//下一页
that.btndown.onclick = function () {
that.nowpage += 1;
if (that.nowpage > that.totlePage) {
that.nowpage = that.totlePage;
}
that.savechangeLi.className = "";
//最大页数据bug
//处理最大页数
if (that.liItem[that.liItem.length - 1].innerHTML >= that.totlePage) {
that.nowchangeColor();
//return 不能要
}
else {
if (that.nowpage <= that.liItem.length) {
that.nowchangeColor();
}
else {
if (that.isshownav == false) {
//处理往后跳转
for (var i = 0; i < that.liItem.length; i++) {
that.liItem[i].innerHTML = parseInt(that.liItem[i].innerHTML) + Math.ceil(that.liItem.length / 2);
}
}
else {
//处理往后跳转
for (var i = 0; i < that.liItem.length; i++) {
that.liItem[i].innerHTML = parseInt(that.liItem[i].innerHTML) + 1;
}
}
that.isshownav = true;
that.liItem[2].className = "colorbg";
that.savechangeLi = that.liItem[2];
}
}
//获取当前点击页的数据
that.getNowPageData(that.nowpage);
that.renderData();
}
//上一页
that.btnup.onclick = function () {
console.log(that.nowpage);
if (that.nowpage <= 1) {
return;
}
that.nowpage -= 1;
that.savechangeLi.className = "";
if (that.nowpage >= that.liItem[Math.floor(that.liItem.length / 2)].innerHTML && that.liItem[that.liItem.length - 1].innerHTML >= that.totlePage) {
that.nowchangeColor();
//这里return 不能要
}
else {
if (that.nowpage <= that.liItem.length) {
if (that.isshownav) {
//处理往后跳转
for (var i = 0; i < that.liItem.length; i++) {
that.liItem[i].innerHTML = i + 1;
}
}
that.nowchangeColor();
that.isshownav = false;
}
else {
//处理往后跳转
for (var i = 0; i < that.liItem.length; i++) {
that.liItem[i].innerHTML = parseInt(that.liItem[i].innerHTML) - 1;
}
that.liItem[Math.floor(that.liItem.length / 2)].className = "colorbg";
that.savechangeLi = that.liItem[Math.floor(that.liItem.length / 2)];
}
}
//获取当前点击页的数据
that.getNowPageData(that.nowpage);
that.renderData();
}
//go按钮
that.gobtn.onclick = function () {
that.isshownav = true;
var num = document.getElementsByClassName("num")[0].value;
that.nowpage = parseInt(num);//修改bug
var start = num - Math.floor(that.liItem.length / 2);
//重绘li
that.savechangeLi.className = "";
if (num < Math.ceil(that.liItem.length / 2)) {
for (var i = 0; i < that.liItem.length; i++) {
that.liItem[i].innerHTML = i + 1;
}
that.nowchangeColor();
}
else {
if (parseInt(num) + Math.floor(that.liItem.length / 2) > that.totlePage) {
var count = that.totlePage - parseInt(num);
count = that.liItem.length - count - 1;
start = num - count;
for (var i = 0; i < that.liItem.length; i++) {
that.liItem[i].innerHTML = start + i;
}
that.nowchangeColor();
}
else {
for (var i = 0; i < that.liItem.length; i++) {
that.liItem[i].innerHTML = start + i;
}
}
that.nowchangeColor();
}
//输出当前页数据
that.getNowPageData(that.nowpage);
that.renderData();
}
},
nowchangeColor: function () {
var that = this;
for (var i = 0; i < that.liItem.length; i++) {
if (parseInt(that.liItem[i].innerHTML) == that.nowpage) {
that.liItem[i].className = "colorbg";
that.savechangeLi = that.liItem[i];
}
}
}
}
window.onload = function () {
var datainfo = document.getElementsByClassName("data-info")[0];
var nav = document.getElementsByClassName("nav")[0];
var totle = document.getElementsByClassName("totle")[0];
var btnup = document.getElementsByClassName("btnup")[0];
var btndown = document.getElementsByClassName("btndown")[0];
var go = document.getElementsByClassName("go")[0];
pageFen.parEle = datainfo;
pageFen.liItem = nav.children;
pageFen.btnup = btnup;
pageFen.btndown = btndown;
pageFen.gobtn = go;
//记录变色的li
pageFen.savechangeLi = pageFen.liItem[0];
pageFen.getAllData();
pageFen.saveTotle();
pageFen.getNowPageData(1);//默认第一页数据
pageFen.renderData();
pageFen.addEventLi();
pageFen.addEventBtn();
totle.innerHTML = pageFen.totlePage;
}
</script>
</body>
</html>
![SVM学习笔记（一）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)