js分页+搜索

随·枫

于 2024-08-04 22:25:25 发布

阅读量117

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/yuzhochaojiwudib/article/details/140913289

版权

好多兄弟和我说，我写的只有分页不能搜索，今天给大家上个好家伙，和昨天不能搜索的版本合并了，老性子，直接上干货

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.7.1.js"></script>
		<style>
			.data_content {
				width: 60%;
				margin-left: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: antiquewhite;
			}
 
			.content_box {
				margin: 10px 0;
				padding: 10px;
				border: 1px solid #ccc;
				width: 80%;
				display: flex;
				justify-content: space-around;
			}
 
			.but_page {
				display: flex;
				justify-content: center;
				margin-top: 20px;
			}
 
			.but_page button {
				padding: 8px 16px;
				margin: 0 5px;
				background-color: #007bff;
				color: #fff;
				border: none;
				cursor: pointer;
			}
 
			.but_page button:hover {
				background-color: royalblue;
			}
 
			.twig {
				line-height: 35px;
				margin-left: 10px;
			}
 
			.page_datas {
				margin-left: 500px;
				margin-top: 15px;
			}
 
			.seek_box {
				text-align: center;
				margin-bottom: 30px;
			}
 
			.centent_ts {
				width: 100%;
				height: 50px;
				font-size: 12px;
				color: red;
				text-align: center;
				position: absolute;
				top: 35px;
			}
		</style>
	</head>
	<body>
		<!-- 搜索框 -->
		<div class="seek_box">
			<input type="text" class="input_value" />
			<button onclick="scr()">搜索</button>
		</div>
		<!-- 存放数据 -->
		<div class="data_content"></div>
		<!-- 底部页码 -->
		<div class="but_page"></div>
		<!-- 页码跳转和每页数据 -->
		<div class="page_datas">
			<input type="number" class="href_but" />
			<button onclick="href_page()">跳转</button>
			<select name="" class="per_page">
				<option value="10">每页10条数据</option>
				<option value="5">每页5条数据</option>
				<option value="15">每页15条数据</option>
			</select>
		</div>
		<div class="centent_ts">
		</div>
		<script>
			//全局变量
			let data;
			let num = 10; //每页数据
			let k = 0; //第几页
			let k_all; //一共多少页
			// 请求假数据
			$.ajax({
				type: "GET",
				url: "js/new_file.json",
				success: function(res) {
					data = res;
					console.log(data);
					applyColours(data);
				},
			});
 
			// 渲染函数
			function applyColours(data) {
				k_all = Math.ceil(data.length / num); //获取到总共多少页
				//渲染内容
				let str = '';
				for (let i = k * num; i < (k + 1) * num; i++) {
					if (data[i] == undefined) {
						break;
					}
					str += `
					<div class="content_box">
						<div>${data[i].id}</div>
						<div>${data[i].name}</div>
						<div>${data[i].gender}</div>
						<div>${data[i].content}</div>
						<div>${data[i].age}</div>
					</div>`;
				}
				$('.data_content').html(str);
				//渲染按钮
				let std = ``;
				std += `<button onclick="but_top()">上一页</button>`
				for (let i = 0; i < k_all; i++) {
					std += `<button onclick="buts(${i})">${i+1}</button>`
				}
				std += `<button onclick="but_bottom()">下一页</button>`
				std += `<div class="twig">共${data.length}条</div>`
				std += `<div class="twig">共${k_all}页</div>`
				std += `<div class="twig">当前第${k+1}页</div>`
				$('.but_page').html(std);
				$(".but_page button").eq(k + 1).css("background-color", "aquamarine")
			}
			// 点击上一页事件
			function but_top() {
				if (k > 0) {
					k--;
				} else {
					$('.centent_ts').html("当前已经是第一页")
					setTimeout(function() {
						$('.centent_ts').html("")
					}, 2000);
				}
				console.log(k);
				applyColours(data);
			}
			// 点击下一页事件
			function but_bottom() {
				if (k < k_all - 1) {
					k++;
				} else {
					$('.centent_ts').html("当前已经是最后一页")
					setTimeout(function() {
						$('.centent_ts').html("")
					}, 2000);
				}
				applyColours(data);
			};
			// 点击按钮跳转
			function buts(da) {
				k = da;
				applyColours(data);
			}
			// 输入页码跳转事件
			function href_page() {
				// 获取输入框里面的值
				k = $('.href_but').val() - 1;
				// 判断是否执行渲染函数的条件
				if (k >= 0 && k <= k_all - 1 && k % 1 === 0) {
					applyColours(data);
				} else {
					//提示用户的内容
					$('.centent_ts').html("请不要输入小数，负数")
					//设置定时器，使提示用户的消息两秒后消失
					setTimeout(function() {
						$('.centent_ts').html("")
					}, 2000);
				}
			}
			// 每页数据
			$('.per_page').on('change', function() {
				// 使用户保持所在内容页
 
				// 获取每页多少条数据
				num = $('.per_page').val();
				new_page = Math.ceil(data.length / num);
				if (k <= new_page) {
					applyColours(data);
				} else {
					k = new_page - 1;
					applyColours(data);
				}
				console.log(new_page);
			});
			// 点击搜索
			function scr() {
				// 获取用户输入的值进行搜索
				let input_value = $('.input_value').val();
				// 定义一个空数组进行放入数据
				let arr = [];
				for (let i = 0; i < data.length; i++) {
					//如果有相同的字样就把他放入数组中
					if (data[i].name.indexOf(input_value) >= 0) {
						arr.push(data[i]);
					}
				}
				applyColours(arr);
			}
			console.log(k);
		</script>
	</body>
</html>