团队筛选不仅可以点击上一页，下一页，数字，首页，尾页可以跳转对应页面，还可以根据数字按钮的长度省略按钮，当排序达到十页时，才会触发。
小于十页，全部显示。
HTML代码内容及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr,
td {
padding: 10px;
text-align: center;
}
thead {
background-color: #d5d5d5;
}
.page {
margin: 20px;
display: flex;
}
.top_page {
margin-left: 10px;
width: 56px;
height: 25px;
border: #000000 1px solid;
text-align: center;
line-height: 25px;
}
.num_page {
margin-left: 10px;
width: 25px;
height: 25px;
border: #000000 1px solid;
text-align: center;
line-height: 25px;
}
.bot_page {
margin-left: 10px;
width: 56px;
height: 25px;
border: #000000 1px solid;
text-align: center;
line-height: 25px;
}
.inp {
margin-left: 10px;
}
.text_page {
margin-left: 10px;
width: 40px;
height: 25px;
border: #000000 1px solid;
text-align: center;
line-height: 25px;
}
.first {
margin-left: 10px;
width: 40px;
height: 25px;
border: #000000 1px solid;
text-align: center;
line-height: 25px;
}
.foot {
margin-left: 10px;
width: 40px;
height: 25px;
border: #000000 1px solid;
text-align: center;
line-height: 25px;
}
.reveal {
width: 80%;
height: 30px;
display: flex;
text-align: center;
margin-left: 26%;
}
.several {
width: 20%;
height: 24px;
}
.texts {
margin-left: 30px;
display: flex;
margin-top: -14px;
}
.text {
margin-left: 6px;
}
</style>
</head>
<body>
<!-- 表格 -->
<table border="1px" cellpadding="10px" style="border-collapse: collapse; margin-left: 100px;">
<!-- 头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>等级</th>
<th>交易量</th>
</tr>
</thead>
<!-- 内容 -->
<tbody class="content">
<tr>
<td>虚拟星辰</td>
<td>男</td>
<td>VIP</td>
<td>420</td>
</tr>
</tbody>
</table>
<!-- 页码 -->
<div class="page">
<div class="first">首页</div>
<div class="top_page">上一页</div>
<div class="num_page"></div>
<div class="bot_page">下一页</div>
<div class="foot">尾页</div>
<input type="text" class="inp" />
<div class="text_page">跳转</div>
</div>
<!-- 显示数据 -->
<div class="reveal">
<select class="several" onchange="severals()">
<option value="3">3</option>
<option value="5">5</option>
<option value="8">8</option>
<option value="10">10</option>
</select>
<div class="texts">
<p class="text">在</p>
<p class="few"></p>
<p class="text">页</p>
<p class="text">显示</p>
<p class="a"></p>
<p class="text">-</p>
<p class="b"></p>
<p class="text">共</p>
<p class="c"></p>
<p class="text">页</p>
</div>
</div>
<script src="js/page.js"></script>
</body>
</html>js代码及注释：
// 声明总数据
let data;
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/page.json', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let text = xhr.responseText;
console.log(text);
data = JSON.parse(text);
console.log(data);
// 调用渲染函数
list(data);
}
};
// 当前所在页面 初始值在第一页
let k = 0;
// 声明初始值 页面显示的数据
let p = 3;
// 声明总页码
let all_page;
// 获取第几页到第几页
let few = document.getElementsByClassName('few')[0];
let a = document.getElementsByClassName('a')[0];
let b = document.getElementsByClassName('b')[0];
let c = document.getElementsByClassName('c')[0];
let numPage = document.getElementsByClassName('num_page')[0];
// 封装函数
function list(data) {
console.log(data);
// 共有几页
all_page = Math.ceil(data.length / p);
console.log(all_page);
// 拼接内容
let str = '';
// 拼接页码
let stre = '';
// for循环遍历数组 声明变量i i初始值为当前页面乘每页显示数据 i又小于（当前页面+1）乘每页显示数据 i才会++
for (let i = k * p; i < (k + 1) * p; i++) {
if (data[i] != undefined) {
// 拼接内容
str += `<tr>
<td>${data[i].name}</td>
<td>${data[i].sex==1?`男`:`女`}</td>
<td>${data[i].class == 1?`会员`:data[i].class == 2?`VIP`:`合伙人`}</td>
<td>${data[i].deal}</td>
</tr>`;
}
};
// 拼接页码
stre += `<div class="first" onclick="first()">首页</div>
<div class="top_page" onclick="previous()">上一页</div>`;
// for循环遍历数组 i的初始值为0 i小于总页码 i++
// 判断页码是否小于10，小于10 页码全部渲染。
if (all_page <= 10) {
for (let i = 0; i < all_page; i++) {
stre +=
`<div class="num_page" onclick="target_page(${i+1})" ${k == i?'style="background-color:#ffff7f"':''}>${i+1}</div>`
}
// 否则就判断当k小于3时 渲染页码1，2，3，4，5
} else if (k < 3) {
stre += `<div class="num_page" onclick="target_page(${1})" ${k == 0?'style="background-color:#ffff7f"':''}>${1}</div>
<div class="num_page" onclick="target_page(${2})" ${k == 1?'style="background-color:#ffff7f"':''}>${2}</div>
<div class="num_page" onclick="target_page(${3})" ${k == 2?'style="background-color:#ffff7f"':''}>${3}</div>
<div class="num_page" onclick="target_page(${4})" ${k == 3?'style="background-color:#ffff7f"':''}>${4}</div>
<div class="num_page" onclick="target_page(${5})">${5}</div>
<div>......</div>`
// 否则判断当k大于等于3且k小于总页码-3时 渲染中间页
} else if (k >= 3 && k < all_page - 3) {
stre +=
`<div>......</div>
<div class="num_page" onclick="target_page(${k-1})">${k-1}</div>
<div class="num_page" onclick="target_page(${k})">${k}</div>
<div class="num_page" onclick="target_page(${k+1})" ${k == k?'style="background-color:#ffff7f"':''}>${k+1}</div>
<div class="num_page" onclick="target_page(${k+2})" >${k+2}</div>
<div class="num_page" onclick="target_page(${k+3})">${k+3}</div>
<div>......</div>`
// 否则判断k大于总结码减3时 渲染数据
} else if (k >= all_page - 3) {
stre +=
`<div>......</div>
<div class="num_page" onclick="target_page(${all_page-4})">${all_page-4}</div>
<div class="num_page" onclick="target_page(${all_page-3})" >${all_page-3}</div>
<div class="num_page" onclick="target_page(${all_page-2})" ${k == 8?'style="background-color:#ffff7f"':''}>${all_page-2}</div>
<div class="num_page" onclick="target_page(${all_page-1})" ${k == 9?'style="background-color:#ffff7f"':''}>${all_page-1}</div>
<div class="num_page" onclick="target_page(${all_page})" ${k == 10?'style="background-color:#ffff7f"':''}>${all_page}</div>`
};
stre += `<div class="bot_page" onclick="down()">下一页</div>
<div class="foot" onclick="foot()">尾页</div>
<input type="text" class="inp"/>
<div class="text_page" onclick="leave()">跳转</div>`;
// 在第几页
few.innerHTML = k + 1;
// 显示第几条数据
a.innerHTML = k * p + 1;
// 到第几条数据 当到最后一页的时候 页码显示的数量大于总数量时 让他等于总数量的个数
b.innerHTML = (k + 1) * p > data.length ? data.length : (k + 1) * p;
// 共几页
c.innerHTML = all_page;
document.getElementsByClassName('content')[0].innerHTML = str;
document.getElementsByClassName('page')[0].innerHTML = stre;
};
// 点击数字跳转页面
function target_page(i) {
k = i - 1;
// 调用渲染函数
list(data);
};
// 点击上一页跳转
function previous() {
// 判断页码大于0 才可以向上一页跳转
if (k > 0) {
k--;
} else {
alert('没有上一页了')
};
// 调用渲染函数
list(data);
};
// 下一页
function down() {
// 判断页码小于总页码时 才可以向下一页跳转
if (k < all_page - 1) {
k++;
} else {
alert('这是最后一页')
};
// 调用渲染函数
list(data);
};
// 点击首页跳转到第一页
// 给首页添加点击事件，直接让k=0 即为第一页
function first() {
k = 0;
// 调用渲染函数
list(data);
};
// 点击尾页 页面显示最后一页
function foot() {
k = all_page - 1;
// 调用渲染函数
list(data);
};
// 输入数字跳转页面
// 给跳转添加点击事件
function leave() {
// 获取输入框的值
let inp = document.getElementsByClassName('inp')[0].value;
console.log(inp);
// 判断输入框内容不能为空且输入框内容不能大于最大页码且内容大于0
if (inp == '' || inp > all_page - 1 || inp < 0 || inp % 1 != 0) {
alert('没有此页吗');
} else {
// k等于输入的数字减一
k = inp - 1;
};
// 调用渲染函数
list(data);
};
// 页面根据下拉框显示数据渲染
// 获取下拉框
let several = document.getElementsByClassName('several')[0];
console.log(several);
// 绑定onchange事件
function severals() {
//重新赋值
p = several.value * 1;
// 获取现在有的页码
all_page = Math.ceil(data.length / p);
// 判断k是否大于总页码
if (k > all_page - 1) {
k = all_page - 1;
};
// 调用渲染函数
list(data);
};json假数据，这里我们写了32条数据：
[{
"name": "虚拟星辰",
"sex": 1,
"class": 2,
"deal": 420
}, {
"name": "神秘星河",
"sex": 2,
"class": 1,
"deal": 301
}, {
"name": "灵光闪现",
"sex": 1,
"class": 3,
"deal": 290
}, {
"name": "微笑的月亮",
"sex": 2,
"class": 2,
"deal": 468
}, {
"name": "萌猫棉花糖",
"sex": 2,
"class": 2,
"deal": 105
}, {
"name": "未知的旅行家",
"sex": 1,
"class": 3,
"deal": 900
}, {
"name": "匿名旅途",
"sex": 1,
"class": 1,
"deal": 503
}, {
"name": "数据风暴",
"sex": 1,
"class": 2,
"deal": 790
}, {
"name": "千变万化",
"sex": 1,
"class": 3,
"deal": 813
}, {
"name": "梦幻仙境",
"sex": 1,
"class": 2,
"deal": 742
}, {
"name": "甜点糖果",
"sex": 2,
"class": 3,
"deal": 609
}, {
"name": "网络风行",
"sex": 1,
"class": 3,
"deal": 305
}, {
"name": "流星追梦 ",
"sex": 1,
"class": 1,
"deal": 289
}, {
"name": "孤独的画家",
"sex": 1,
"class": 1,
"deal": 512
}, {
"name": "星星饼干",
"sex": 2,
"class": 2,
"deal": 1059
}, {
"name": "幻梦幽影",
"sex": 2,
"class": 3,
"deal": 349
}, {
"name": "星辰逸羽",
"sex": 1,
"class": 1,
"deal": 59
}, {
"name": "灵韵流光",
"sex": 1,
"class": 3,
"deal": 783
}, {
"name": "清风聆心",
"sex": 2,
"class": 3,
"deal": 245
}, {
"name": "绯色晨曦 ",
"sex": 2,
"class": 2,
"deal": 178
}, {
"name": "幽夜幻影",
"sex": 1,
"class": 1,
"deal": 853
}, {
"name": "紫炎幻梦",
"sex": 2,
"class": 1,
"deal": 908
}, {
"name": "自强不息",
"sex": 1,
"class": 2,
"deal": 1059
}, {
"name": "步步高升",
"sex": 2,
"class": 1,
"deal": 463
}, {
"name": "如花似锦",
"sex": 2,
"class": 3,
"deal": 97
}, {
"name": "前程似锦",
"sex": 1,
"class": 2,
"deal": 289
}, {
"name": "大展宏图",
"sex": 2,
"class": 3,
"deal": 752
}, {
"name": "乘风波浪",
"sex": 1,
"class": 3,
"deal": 607
}, {
"name": "如花似锦",
"sex": 2,
"class": 2,
"deal": 999
}, {
"name": "好事成双",
"sex": 1,
"class": 1,
"deal": 739
}, {
"name": "悠悠我心",
"sex": 2,
"class": 1,
"deal": 576
}, {
"name": "金榜题名",
"sex": 2,
"class": 1,
"deal": 666
}]
![[译]Reactjs性能篇](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Ffacebook.github.io%2Freact%2Fimg%2Fdocs%2Fshould-component-update.png&pos_id=img-oQfScO9b-1720015041810)
