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