JS实现分页功能（单选按钮、全选按钮、跳转页面）

这里展现出成品的样式，接下来让我们欣赏来自代码的快乐

CSS：

<style>
			th,td{
				min-width: 120px;
				text-align: center;
			}
			
			.tool {
				display: flex;
				align-items: center;
				margin-top: 20px;
			}

			.paging {
				display: flex;
				align-items: center;

			}

			.paging div {
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border: 1px solid #999999;
				border-radius: 6px;
				background-color: #EEEEEE;
				font-size: 20px;
				margin: 0 5px;
			}

			.paging span {
				display: block;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border: 1px solid #999999;
				border-radius: 6px;
				background-color: #EEEEEE;
				font-size: 20px;
				margin: 0 5px;
			}

			.inp input {
				width: 60px;
			}
		</style>

HTML：

	<table border="1" cellspacing="0" cellpadding="10">
			<thead>
				<tr>
					<th><input type="checkbox" class="quanxuan" onclick="xuanqu()">全选</th>
					<th>序号</th>
					<th>名字</th>
					<th>金额</th>
					<th>名称</th>
				</tr>
			</thead>
			<tbody id="tbody">
			<tr>
				<th>1</th>
				<th>张三</th>
				<th>18</th>
				<th>河南</th>
			</tr>
			<tr>
				<th>1</th>
				<th>张三</th>
				<th>18</th>
				<th>河南</th>
			</tr>
			<tr>
				<th>1</th>
				<th>张三</th>
				<th>18</th>
				<th>河南</th>
			</tr>
			<tr>
				<th>1</th>
				<th>张三</th>
				<th>18</th>
				<th>河南</th>
			</tr>
			</tbody>
		</table>
		<tbody>
			<div class="tool">
				<select name="" id="tiao">
					<option value="1">每页5条</option>
					<option value="2">每页10条</option>
					<option value="3">每页15条</option>
					<option value="4">每页20条</option>
					<option value="5">每页25条</option>
					<option value="6">每页30条</option>
				</select>
				<div class="paging">
						<div><</div>
						<span>1</span>
						<span>2</span>
						<span>3</span>
						<div>></div>
					</div>
					<div class="inp">
						前往
						<input type="number" class="tiaozhuan">
						页
					</div>
				</div>
		</tbody>

JS:
 

<script>
			let data = [
				{
					id:1,
					name:"雷神",
					age:888,
					address:"穿越火线"
				},{
					id:2,
					name:"黑骑士",
					age:888,
					address:"穿越火线"
				},{
					id:3,
					name:"黑龙",
					age:888,
					address:"穿越火线"
				},{
					id:4,
					name:"死神",
					age:888,
					address:"穿越火线"
				},{
					id:5,
					name:"千变",
					age:888,
					address:"穿越火线"
				},{
					id:6,
					name:"QBZ-蔷薇",
					age:488,
					address:"穿越火线"
				},{
					id:7,
					name:"毁灭",
					age:888,
					address:"穿越火线"
				},{
					id:8,
					name:"幻神",
					age:1000,
					address:"穿越火线"
				},{
					id:9,
					name:"星神",
					age:1000,
					address:"穿越火线"
				},{
					id:10,
					name:"AWM-裁决",
					age:688,
					address:"穿越火线"
				},{
					id:11,
					name:"M4A1-传说-天使",
					age:688,
					address:"穿越火线"
				},{
					id:12,
					name:"USB-雷暴",
					age:1400,
					address:"穿越火线"
				},{
					id:13,
					name:"修罗",
					age:488,
					address:"穿越火线"
				},{
					id:14,
					name:"COP-堕天神",
					age:1400,
					address:"穿越火线"
				},{
					id:15,
					name:"柯尔特-竞技荣光",
					age:20,
					address:"穿越火线"
				},{
					id:16,
					name:"屠龙",
					age:488,
					address:"穿越火线"
				},{
					id:17,
					name:"龙啸",
					age:488,
					address:"穿越火线"
				},{
					id:18,
					name:"擎天",
					age:488,
					address:"穿越火线"
				},{
					id:19,
					name:"麒麟刺",
					age:488,
					address:"穿越火线"
				},{
					id:20,
					name:"王者之刺",
					age:100,
					address:"穿越火线"
				},{
					id:21,
					name:"王者之锋",
					age:100,
					address:"穿越火线"
				},{
					id:22,
					name:"魅影",
					age:200,
					address:"穿越火线"
				},{
					id:23,
					name:"王者魅影",
					age:200,
					address:"穿越火线"
				},{
					id:24,
					name:"春",
					age:1400,
					address:"穿越火线"
				},{
					id:25,
					name:"王者春",
					age:200,
					address:"穿越火线"
				},{
					id:26,
					name:"潘多拉-X",
					age:20,
					address:"穿越火线"
				},{
					id:27,
					name:"审判者",
					age:488,
					address:"穿越火线"
				},{
					id:28,
					name:"暗夜-X",
					age:20,
					address:"穿越火线"
				},{
					id:29,
					name:"雷神-荣耀",
					age:1000,
					address:"穿越火线"
				},{
					id:30,
					name:"毁灭-荣耀",
					age:1000,
					address:"穿越火线"
				}
			]
			
			let page = 5;
			let num = 0;
			
			
			renders();
			
			
			
			function renders(){
				let str = "";
				for (let i = num*page; i < (num+1)*page; i++) {
					if(data[i]){
						str += `
						<tr>
							<th><input type="checkbox" class="danxuan" onclick="danxuan_d()"></th>
							<th>${data[i].id}</th>
							<th>${data[i].name}</th>
							<th>${data[i].age}</th>
							<th>${data[i].address}</th>
						</tr>
						`;
					}
				}
				document.getElementById("tbody").innerHTML = str;
				renderPage();
			}
			
			function renderPage(){
				let str = `<div onclick="isLeft()"><</div>`;
				let count = Math.ceil(data.length /page);
				for (let i = 0; i < count; i++) {
					str += `
					<span onclick="isNum(${i})" style = "background-color:${num == i ? '#666eff' : '#EEEEEE'}">${i+1}</span>
					`;
				}
				str += `<div onclick="isRight()">></div>`;
				document.getElementsByClassName("paging")[0].innerHTML = str;
			}
			
			function isRight(){
				let count = Math.ceil(data.length /page);
				if (num < count-1) {
					num++;
					renders();
				}else{
					alert("最后一页了别点了。")
				}
			}
			
			function isLeft(){
				if (num > 0) {
					num--;
					renders();
				}else{
					alert("第一页了就别点了呗。")
				}
			}
			
			
			function isNum(i){
				num = i;
				renders();
			}
			
			// 全选与单选
			function xuanqu(){
				let quanxuan = document.getElementsByClassName("quanxuan")[0];
				let danxuan = document.getElementsByClassName("danxuan");
				for (let i = 0; i < danxuan.length; i++) {
					danxuan[i].checked = quanxuan.checked;
				}
				
			}
			// 单选
			function danxuan_d(){
				let quanxuan = document.getElementsByClassName("quanxuan")[0];
				let danxuan = document.getElementsByClassName("danxuan");
				for (let i = 0; i < danxuan.length; i++) {
					if (danxuan[i].checked == false) {
						quanxuan.checked = false;
						return;
					}
				}
				quanxuan.checked = true;
			}
			
			
			// 每页几条
			
			let tiao = document.getElementById("tiao");
			tiao.addEventListener("change",function(){
				num = 0;
				let g = this.value;
				if (g == 1) {
					page = 5;
				} else if(g == 2){ 
					page = 10
				} else if(g == 3){
					page = 15
				}else if(g == 4){
					page = 20
				}else if(g == 5){
					page = 25
				}else if(g == 6){
					page = 30
				}
				renders();
			})
			
			// 跳转页面
			
			let tiaozhuan = document.getElementsByClassName("tiaozhuan")[0];
			
			tiaozhuan.addEventListener("change",function(){
				let sssss = this.value;
				if (sssss < (data.length / page)+1 && sssss != '' && sssss > 0) {
					num = sssss-1;
				} else{
					alert("请输入正确页数")
				}
				renders();
			})
			
			
		</script>

请问你快乐吗？