js实现分页功能

最新推荐文章于 2024-05-03 15:43:47 发布

萝卜头不吃萝卜头

最新推荐文章于 2024-05-03 15:43:47 发布

阅读量182

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/128455104

版权

功能样式：

具体实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分页</title>
		<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>
	</head>
	<body>
		<div class="box">
			<table cellspacing = "0">
				<thead>
					<tr>
						<th colspan="5">&#8619人物志&#8620</th>
					</tr>
					<tr>
						<td>&#9814id</td>
						<td>&#9814姓名</td>
						<td>&#9814年龄</td>
						<td>&#9814身份</td>
						<td>&#9814朝代</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 onclick="ao()">确定</button>
				</div>
			</div>
		</div>
		<script>
			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];
			let num = 5;
			let k = 0;
			let data;
			let s;
			let xml = new XMLHttpRequest();
			xml.open('get','分页.json');
			xml.send();
			xml.onreadystatechange = function(){
				if(xml.readyState == 4 && xml.status == 200){
					let text = xml.responseText;
					data = JSON.parse(text);
					fn();
				}
			}
			function fn(){
				// let arr = [];
				s = Math.ceil(data.length / num);
				let st = '';
				for(let i = 0; i < s; i++){
					st += '<span onclick="ac('+ i +')">'+ (i+1) +'</span>'
				}
				span.innerHTML = st;
				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>"
					}
				}
				// console.log(arr)
				// for(let i = 0 ; i < arr.length; i++){
				// 	str += "<tr>"+
				// 		"<td>"+ arr[i].id +"</td>"+
				// 		"<td>"+ arr[i].name +"</td>"+
				// 		"<td>"+ arr[i].age +"</td>"+
				// 		"<td>"+ arr[i].ident +"</td>"+
				// 		"<td>"+ arr[i].edu +"</td>"+
				// 	"</tr>"
				// }
				tbody.innerHTML = str;
				if(k == 0){
					button[0].style.backgroundColor = '#fff';
				}else{
					button[0].style.backgroundColor = '';
				}
				if(k == s-1){
					button[1].style.backgroundColor = '#fff';
				}else{
					button[1].style.backgroundColor = '';
				}
			}
			button[0].onclick = function(){
				if(k > 0){
					k--;
					fn();
				}
			}
			button[1].onclick = function(){
				if(k < s-1){
					k++;
					fn();
				}
			}
			function ac(a){
				k = a;
				fn();
			}
			function ao(){
				let v = k;
				k = input.value;
				if(k-1 < s){
					k = k-1;
					fn();
				}else{
					alert('内容没有那么多')
					k = v;
					input.value = 1 ;
				}
			}
		</script>
	</body>
</html>

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" : 8,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 9,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 10,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 11,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 12,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 13,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 14,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 15,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 16,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
},{
	"id" : 17,
	"name" : "李四",
	"age" : 36,
	"ident" : "乞丐",
	"edu" : "元末"
}]

以上就是本章的全部内容，感谢您的阅读。