使用js来实现分页功能

分页在网页上是一个很常见的功能，今天我们来实现一个人物列表，包含了分页的功能，效果如下：

代码可以参考，但是自己也要去理解一下代码中的意思，不要直接cv以后就什么都不管了，这样对自己是没有任何效果的，边写边看，对自己会有很大帮助的！！！

好了~话不多说，直接上代码吧 

css代码如下：

<style>
			.box{
				margin-left: 20%;
				width: 60%;
			}
			table{
				margin: 20px;
				border: 0.5px solid;
			}
			td{
				width: 5rem;
				height: 2rem;
				text-align: center;
				border: 0.5px solid;
			}
			th{
				width: 100%;
				height: 1.5rem;
				border: 0.5px solid;
			}
			.foot{
				margin-left: 25px;
				width: 90%;
				display: flex;
				top: 17rem;
			}
			.foot-put input{
				width: 12px;
				height: 12px;
			}
			.box0{
				display: flex;
			}
			.foot-put{
				display: flex;
				margin: 0 10px;
			}
			.span{
				display: flex;
			}
			.foot-put0{
				margin: 0px 10px;
				line-height: 30px;
				color: cadetblue;
			}
			.foot-put0 input{
				margin: 0 6px;
			}
			.span span{
				text-align: center;
				line-height: 30px;
				display: inline-block;
				width: 30px;
				height: 30px;
				margin: 0 5px;
				background-color: aqua;
				border: 1px solid;
				border-radius: 10%;
			}
		</style>

html代码如下：

<div class="box">
			<table cellspacing = "0">
				<thead>
					<tr>
						<th colspan="5">&#8619人物志&#8620</th>
					</tr>
					<tr>
						<td>id</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>身份</td>
						<td>朝代</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>技能</td>
						<td>学历</td>
					</tr>
				</tbody>
			</table>
			<div class="foot">
				<div class="box0">
					<button>上一页</button>
					<div class="span">
						<span onclick="ac(0)">1</span>
					</div>
					<button>下一页</button>
				</div>
				<div class="foot-put">
					<div class="foot-put0">
						到第<input type="text" value="1">页
					</div>
					<button>确定</button>
				</div>
			</div>
		</div>

js代码如下：

（json数据可以自己随便写一些）

//获取标签
let tbody = document.getElementsByTagName('tbody')[0];
			let input = document.getElementsByTagName('input')[0];
			let box0 = document.getElementsByClassName('box0')[0];
			let button = box0.getElementsByTagName('button');
			let span = document.getElementsByClassName('span')[0];
			console.log(input.value)
			let num = 5;//定义每页最多5条数据
			let k = 0;//定义从第几页开始显示
			let data;
			let xml = new XMLHttpRequest();
			xml.open('get','js/分页n.json');//获取json数据
			xml.send();
			xml.onreadystatechange = function(){
				if(xml.readyState == 4 && xml.status == 200){
					let text = xml.responseText;
					data = JSON.parse(text);
					fn();//调用函数
				}
			}
			let s;
			function fn(){
				s = Math.ceil(data.length / num);
				let str = '';
				for(let i = k * num; i < (k+1) * num ; i++){
					if(data[i] != undefined){
						// arr.push(data[i]);
						str += "<tr>"+
							"<td>"+ data[i].id +"</td>"+
							"<td>"+ data[i].name +"</td>"+
							"<td>"+ data[i].age +"</td>"+
							"<td>"+ data[i].ident +"</td>"+
							"<td>"+ data[i].edu +"</td>"+
						"</tr>"
					}
				}

				tbody.innerHTML = str;
			}
			button[0].onclick = function(){//点击事件，点击退页面
				if(k > 0){
					k--;
					fn();
				}
			}
			button[1].onclick = function(){//点击页面+1
				if(k < s-1){
					k++;
					fn();
				}
			}
			let st = '';
			for(let i = 0; i <= s-1; i++){
				st += '<span onclick="ac('+ i +')">'+ (i+1) +'</span>'
			}
			span.innerHTML = st;
			function ac(a){
				k = a;
				fn();
			}

json数据：

[{
	"id" : 1,
	"name" : "张三",
	"age" : 25,
	"ident" : "法外狂徒",
	"edu" : "中国"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 3,
	"name" : "王五",
	"age" : 23,
	"ident" : "间谍",
	"edu" : "民国"
},{
	"id" : 4,
	"name" : "赵六",
	"age" : 18,
	"ident" : "刺客",
	"edu" : "战国末期"
},{
	"id" : 5,
	"name" : "岳飞",
	"age" : 23,
	"ident" : "民族英雄",
	"edu" : "南宋"
},{
	"id" : 6,
	"name" : "霍去病",
	"age" : 23,
	"ident" : "国家英雄",
	"edu" : "汉朝"
},{
	"id" : 7,
	"name" : "李靖",
	"age" : 23,
	"ident" : "军神",
	"edu" : "唐朝"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 2,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
}]