<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.pagination {
width: 600px;
height: 80px;
border: 2px solid pink;
margin: 30px auto;
}
.pagination > span, .pagination li {
float: left;
line-height: 80px;
padding: 0 5px;
cursor: pointer;
}
.pagination {
padding-left: 200px;
}
.pagination li.active {
color: red
}
table {
width: 800px;
margin: 0 auto;
text-align: center;
border: 1px solid #333;
}
table > tbody > tr {
cursor: pointer;
}
table > tbody > tr:nth-child(odd) {
background-color: pink;
}
table > tbody > tr:nth-child(even) {
background-color: orange;
}
table > tbody > tr:hover {
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<div class="pagination">
<span class="first">首页</span>
<span class="prev">上一页</span>
<ul class="pageList"></ul>
<span class="next">下一页</span>
<span class="last">尾页</span>
</div>
<table cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="./lib/utils.js"></script>
<script>
/*
分页渲染
分析业务逻辑
1. 准备若干条数据 (123)
2. 决定一页显示多少条 (11)
3. 计算出有多少页
=> 根据计算的数字来渲染 ul 下面的 li
4. 先拿出第一页数据渲染表格
5. 当你点击切换按钮的时候
=> 换到对应的页的数据显示
代码实现:
1. 获取元素
=> .pageList, 每一个分页按钮渲染在里面
=> 上一页下一页.../ 按钮, 有事件
=> tbody, 表格要渲染再里面
2. 准备一个数据
=> 自己组装一个数组
=> 我们循环创建一个数组
3. 开始渲染分页按钮
=> 根据多少条数据和一页显示多少计算多少页
=> 123 , 11, Math.ceil(123 / 11)
=> 拼接字符串
-> 没有办法再创建的时候直接添加事件
=> 创建节点
-> 可以再创建的时候直接添加事件
4. 渲染第一页的表格数据
=> 渲染表格肯定不能使用 userList 渲染
=> 从 userList 里面获取一部分来渲染
-> splice, 直接操作原始数组
-> slice, 不改变原始数组
=> 我们要准备一个新数组
-> 根据当前是第几页来决定拿到数组里面哪些数据
-> 第几页, 将来按下按钮的时候还要改变
=> 拆数组
-> 第一页要拆, 要渲染
-> 当你切换到第二页的时候也要拆, 要拆要渲染
-> 把拆数组和渲染这个事情写在一个函数里面
-> 每次切换的时候直接调用函数 (11)
第 1 页 [0] ~ [10]
第 2 页 [11] ~ [21]
第 3 页 [22] ~ [32]
第 n 页 [(n - 1) * 11] ~ [n * 11 - 1]
5. 绑定事件
5-1. 下一页事件
=> 改变 currentPage
=> currentPage !== totalPage 的时候
=> 列表按钮需要改变 active 的位置
=> 把改变 active 的是放成函数
5-5. 点击每一个 li 的事件
=> 去到某一页
=> 你能拿到你点击的是哪一个 li, this
=> 他代表第几页, 写一个自定义属性
*/
// 1. 获取元素
var pageList = document.querySelector('.pageList')
var prevBtn = document.querySelector('.prev')
var nextBtn = document.querySelector('.next')
var firstBtn = document.querySelector('.first')
var lastBtn = document.querySelector('.last')
var tbody = document.querySelector('tbody')
// 4-1. 准备一个变量表示当前页
var currentPage = 1
// 2. 自己循环创建一个数组
var userList = []
var str1 = '赵钱孙李周吴郑王'
var str2 = '一二三四五六七八九十'
var str3 = '男女'
for (var i = 0; i < 123; i++) {
userList.push({
id: i + 1,
username: str1[rangeRandom(0, 7)] + str2[rangeRandom(0, 9)],
gender: str3[rangeRandom(0, 1)],
age: rangeRandom(18, 22),
class: rangeRandom(2000, 2003)
})
}
// 3. 渲染分页按钮
var totlePage = Math.ceil(userList.length / 11) // 12
// 创建节点的方式添加分页按钮
// 3-1. 准备一个文档碎片
var frg = document.createDocumentFragment()
// 3-2. 循环
for (var i = 1; i <= totlePage; i++) {
// 3-3. 创建 li 标签
var li = document.createElement('li')
li.innerHTML = i
li.dataset.page = i
if (i === 1) li.className = 'active'
// 3-4. 直接给 li 添加点击事件
li.onclick = function () {
// 业务逻辑
// console.log('点击事件')
// 拿到自己身上记录的 data-page 属性
var page = this.dataset.page - 0
currentPage = page
bindHtml()
}
// 3-5. 把 li 放在 frg 里面
frg.appendChild(li)
}
// 3-6. 循环结束, 把 li 添加到 ul 里面
pageList.appendChild(frg)
// 4-2. 准备一个函数渲染页面
function bindHtml() {
// 4-3. 拆开数组
// 根据 currentPage 拆开
var bindList = userList.slice((currentPage - 1) * 11, currentPage * 11)
// 4-4. 渲染页面
// 拼接字符串
var str = ''
bindList.forEach(function (item, index) {
str += `
<tr>
<td>${ index + 1 }</td>
<td>${ item.id }</td>
<td>${ item.username }</td>
<td>${ item.gender }</td>
<td>${ item.age }</td>
<td>${ item.class }</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
`
})
tbody.innerHTML = str
// 改变 active 的位置
changeCurrent()
}
bindHtml()
// 5. 绑定事件
// 下一页
nextBtn.onclick = function () {
if (currentPage === totlePage)
return
// 让 currentPage++
currentPage++
// 直接执行一遍 bindHtml()
bindHtml()
}
// 上一页
prevBtn.onclick = function () {
if (currentPage === 1) return
currentPage--
bindHtml()
}
// 首页
firstBtn.onclick = function() {
if (currentPage === 1) return
currentPage = 1
bindHtml()
}
// 尾页
lastBtn.onclick = function () {
if (currentPage === totlePage) return
currentPage = totlePage
bindHtml()
}
// 6. 准备一个改变 active 的函数
function changeCurrent() {
// 根据 currentPage 来改变
// 自己有, 其他都没有
// 循环遍历 ul 下面的所有子元素
// 让每一个都没有 active
// 让索引等于 currentPage - 1 的哪一个有
for (var i = 0; i < pageList.children.length; i++) {
pageList.children[i].className = ''
}
pageList.children[currentPage - 1].className = 'active'
}
document.onselectstart = function (e) { e.preventDefault() }
</script>
</body>
</html>
版权声明：本文为m0_49933232原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。