分页功能制作

最新推荐文章于 2024-11-12 11:19:19 发布

乐多_L

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量281

点赞数 8

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_81449444/article/details/137068484

版权

使用HTML，css，js和json假数据制作分页功能。

以下为分页功能结构，下面可以点击上一页，下一页及数字，还可以自己输入想要跳转的页面点击跳转。下面每页显示的内容也会跟着改变。还可以选择不同的每页显示数据的条数。默认为每页五条数据。

HTML结构：

<body>
		<table border="1px" style=text-align="center" cellpadding="10" cellspacing="0">
			<thead>
				<tr>
					<th class="caption">姓名</td>
					<th class="caption">年龄</td>
					<th class="caption">性别</td>
					<th class="caption">爱好</td>
				</tr>
			</thead>
			<tbody>
				<tr class="content">
					<!-- <td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td> -->
				</tr>
			</tbody>
		</table>

		<!-- 上一页 -->
		<div class="page">
			<div class="prev">上一页</div>
			<p class="num">1</p>
			<div class="prev">下一页</div>
			<input class="Afew" />
			<div class="tar">跳转</div>
		</div>
		<!-- 显示几条数据 -->
		<div class="footer">
			<p>显示第</p>
			<p class="first">x</p>
			<p>到第</p>
			<p class="second">x</p>
			<p>条数据;</p>
			<p>总共</p>
			<p class="all">x</p>
			<p>条数据;</p>
			<select class="selects">
				<option style="border: 1px #e9e9de;" value="5" class="option">每页5条</option>
				<option value="10">每页10条</option>
				<option value="15">每页15条</option>
				<option value="20">每页20条</option>
				<option value="30">每页30条</option>
			</select>
			<p>数据</p>
		</div>
		<!-- 提示框 -->
		<div class="prompt">
			<div class="prompt_text"></div>
		</div>
		<script src="js/paging.js"></script>
	</body>

css样式：

<style>
		* {
			margin: 0;
			padding: 0;
		}

		.caption {
			text-align: center;
			width: 140px;
			height: 50px;
		}

		td {
			width: 140px;
			height: 50px;
			text-align: center;
		}

		.page {
			display: flex;
			margin-top: 10px;
		}

		.prev {
			width: 80px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			background-color: #FAFAFA;
			border: 1px solid #adadad;
		}

		.num {
			width: 40px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			background-color: #FAFAFA;
			border: 1px solid #adadad;
		}

		.Afew {
			width: 60px;
			height: 40px;
			border: 1px solid #adadad;
			margin-left: 10px;
		}

		.tar {
			width: 60px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			background-color: #FAFAFA;
			border: 1px solid #adadad;
			margin-left: 10px;
		}

		.footer {

			display: flex;
			flex-wrap: nowrap;
			margin-top: 10px;
			margin-bottom: 20px;
		}

		.first {
			width: 20px;
			text-align: center;
		}

		.second {
			width: 20px;
			text-align: center;
		}

		.all {
			width: 20px;
			text-align: center;
		}

		.selects {
			margin-left: 10px;
		}

		.prompt {
			width: 180px;
			height: 80px;
			border: 1px solid #ffaa00;
			background-color: blanchedalmond;
			border-radius: 10px;
			position: fixed;
			top: 0;
			left: 15%;
			display: none;
		}

		.prompt_text {
			font-size: 16px;
			text-align: center;
			line-height: 80px;
		}
	</style>

js部分：

// 分页功能
// data总数据
let data;
// 总页码
let count_pages;
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/paging.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);
		item(data);
	}
};
// 当前所在页面 初始值在第一页 
let k = 0;
// 每页显示多少条 初始值为五条
let nums = 5;

function item(data) {
	// 计算总页面数量
	count_pages = Math.ceil(data.length / nums);
	// console.log(count_pages);
	// 总数据
	let str = '';
	// 页码
	let strs = '';
	// 遍历数组
	for (let i = k * nums; i < (k + 1) * nums; i++) {
		if (data[i] == undefined) {
			break;
		}
		// console.log(data);
		// 拼接数据内容
		str += `
		<tr class="content">
					<td>${data[i].name}</td>
					<td>${data[i].age}</td>
					<td>${data[i].gender}</td>
					<td>${data[i].hobby}</td>
		</tr>`;
	};

	strs += `
			<div class="prev" onclick="previous()">上一页</div>`;
	for (let i = 0; i < count_pages; i++) {
		// 渲染页码 使用三元表达式给选中的变颜色
		strs +=
			`<p class="num" onclick="target_pages(${i})" ${k == i?'style="background-color:#ffff7f"':''}>${i+1}</p>`;

	};
	strs += `<div class="prev" onclick="down()">下一页</div>
			<input class="Afew" />
			<div class="tar" onclick="skip()">跳转</div>`;
	// 显示的第一个数字 页面×页面的条数
	$(".first").html(k * nums + 1);
	$(".second").html((k + 1) * nums > data.length ? data.length : (k + 1) * nums);
	// 显示总数据
	$(".all").html(data.length);
	$("tbody").html(str);
	$(".page").html(strs);
};
// 上一页的点击事件
function previous() {
	// console.log(111);
	if (k > 0) {
		k--;
		// 调用渲染数据
		item(data);
	} else {
		$(".prompt").show();
		$(".prompt_text").html('已经是第一页');
		setTimeout(function() {
			$(".prompt").hide();
		}, 1500);
	}
};
// 数字点击事件
function target_pages(i) {
	console.log(i + 1);
	k = i;
	$(".num").css("background-color", "#ffff7f");
	$(".num").css("background-color", "#FFFFFF");
	item(data);
};
// 下一页点击事件
function down() {
	// k小于总页码
	if (k < count_pages - 1) {
		// console.log(k < count_pages);
		k++;
		item(data);
	} else {
		// 提示框
		$(".prompt").show();
		$(".prompt_text").html('已经是最后一页');
		setTimeout(function() {
			$(".prompt").hide();
		}, 1500);
	}
};
// 点击数字跳转相应页面
function skip() {
	let inp = document.getElementsByClassName('Afew')[0].value;
	console.log(inp);
	// 判断输入框不为空 提示请输入跳转的页码
	if (inp == '') {
		// 提示框
		$(".prompt").show();
		$(".prompt_text").html('请输入要跳转的页码');
		setTimeout(function() {
			$(".prompt").hide();
		}, 1500);
		// 判断输入框大于总页码时 提示没有此页码
	} else if (inp > count_pages) {
		// 提示框
		$(".prompt").show();
		$(".prompt_text").html('没有此页码');
		setTimeout(function() {
			$(".prompt").hide();
		}, 1000);
		// 判断输入框内的值不为小数 不为负数和0
	} else if (inp % 1 != 0 || inp <= 0) {
		$(".prompt").show();
		$(".prompt_text").html('请输入正确页码数');
		setTimeout(function() {
			$(".prompt").hide();
		}, 1000);
		// 否则就跳转
	} else {
		k = inp - 1;
	};
	item(data);
};
// 点击下拉框 根据内容渲染页面数据
// 获取下拉框 给下拉框添加
let selects = document.getElementsByClassName('selects')[0];
selects.addEventListener("change", function() {
	//重新赋值
	nums = this.value;
	// 获取现在有的页码
	count_pages = Math.ceil(data.length / nums);
	// 判断k是否大于总页码 
	if (k > count_pages - 1) {
		k = count_pages - 1;

	};

	item(data);
});

json假数据部分，使用数组包对象的方式，共有33条数据：

[{
	"name": "刘小巍",
	"age": 8,
	"gender": "女",
	"hobby": "拍视频"
}, {
	"name": "娄小慧",
	"age": 20,
	"gender": "女",
	"hobby": "刷视频"
}, {
	"name": "聂小博",
	"age": 16,
	"gender": "女",
	"hobby": "听歌"
}, {
	"name": "赵小康",
	"age": 29,
	"gender": "男",
	"hobby": "研究"
}, {
	"name": "张小铭",
	"age": 17,
	"gender": "男",
	"hobby": "爱追番"
}, {
	"name": "超超",
	"age": 60,
	"gender": "男",
	"hobby": "武术"
}, {
	"name": "董小珊",
	"age": 23,
	"gender": "女",
	"hobby": "看电视"
}, {
	"name": "张小俊",
	"age": 35,
	"gender": "男",
	"hobby": "打火影"
}, {
	"name": "煎饼果子",
	"age": 50,
	"gender": "女",
	"hobby": "打电话"
}, {
	"name": "新疆炒米粉",
	"age": 80,
	"gender": "女",
	"hobby": "吹牛"
}, {
	"name": "楼小梦",
	"age": 66,
	"gender": "女",
	"hobby": "看电影"

}, {
	"name": "娄小明",
	"age": 19,
	"gender": "男",
	"hobby": "旅游 滑雪"
}, {
	"name": "娄小文",
	"age": 25,
	"gender": "女",
	"hobby": "做饭"
}, {
	"name": "小马",
	"age": 10,
	"gender": "男",
	"hobby": "跑步"
}, {
	"name": "冯小轩",
	"age": 66,
	"gender": "男",
	"hobby": "打篮球"
}, {
	"name": "囡囡",
	"age": 2,
	"gender": "女",
	"hobby": "吃罐头"
}, {
	"name": "墨墨",
	"age": 2,
	"gender": "男",
	"hobby": "打羽毛球"
}, {
	"name": "汤圆",
	"age": 4,
	"gender": "女",
	"hobby": "睡觉"
}, {
	"name": "沐沐",
	"age": 3,
	"gender": "女",
	"hobby": "撒花"
}, {
	"name": "小橘",
	"age": 1,
	"gender": "男",
	"hobby": "吃冻干"
}, {
	"name": "kitty",
	"age": 12,
	"gender": "女",
	"hobby": "跳绳"
}, {
	"name": "孟小雨",
	"age": 42,
	"gender": "男",
	"hobby": "撸猫"
}, {
	"name": "赵小乐",
	"age": 13,
	"gender": "男",
	"hobby": "读诗"
}, {
	"name": "张晓兰",
	"age": 71,
	"gender": "女",
	"hobby": "泡温泉"
}, {
	"name": "李洵",
	"age": 21,
	"gender": "男",
	"hobby": "冒险"
}, {
	"name": "高丽珠",
	"age": 90,
	"gender": "男",
	"hobby": "吹笛子"
}, {
	"name": "李金梅",
	"age": 38,
	"gender": "女",
	"hobby": "弹钢琴"
}, {
	"name": "蓟娇然",
	"age": 75,
	"gender": "男",
	"hobby": "游泳"
}, {
	"name": "池思洁",
	"age": 1,
	"gender": "男",
	"hobby": "拍照片"
}, {
	"name": "沈欣瑶",
	"age": 41,
	"gender": "女",
	"hobby": "工作"
}, {
	"name": "谭碧灵",
	"age": 52,
	"gender": "男",
	"hobby": "踢足球"
}, {
	"name": "权天恩",
	"age": 62,
	"gender": "女",
	"hobby": "猜字谜"
}, {
	"name": "谷兰娟",
	"age": 70,
	"gender": "女",
	"hobby": "坐飞机"
}]