JQuery+Ajax实现动态数据分页

柠檬精不吃柠檬

已于 2024-05-17 20:09:29 修改

阅读量512

点赞数 17

文章标签： jquery 前端 javascript

于 2024-05-17 20:03:31 首次发布

本文链接：https://blog.csdn.net/m0_74937643/article/details/139011821

版权

效果图

每次单击笑脸会获取当前数据在json中的位置

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态数据分页</title>
</head>
<body>
	<table id="table">
		<thead>
			<tr>
				<th>/</th>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>出生日期</th>
				<th>爱好</th>
			</tr>
		</thead>
		<tbody id="tbody">
	    </tbody>
	</table>
	<div class="pagination">
	</div>
	<script src="jquery/jquery-1.11.3.js" type="text/javascript"></script>
</body>

定义每页显示的数据量、获取总页数（数据总数%数据量），使用Math.ceil（）对总页数向上取整

// 每页显示的数据量
var pageSize = 5;
// 获取总页数,使用Math.ceil()对页数进行向上取整
var pageCount = Math.ceil(str.length / pageSize);

初始化分页器，关键代码

// 初始化分页器
for (var i = 1; i <= pageCount; i++) {
    $(".pagination").append($("<a href='#' data-page='" + i + "'>" + i + "</a>"));
}

注意获取数据位置时要加上起始索引，否则每一次获取都只是在当前页的位置

// 单击每条数据前的笑脸可以显示当前数据在数组中的位置
		$("img").click(function() {
			// 每次单击都先将前一次的数据清空
			$("#numNow").empty();
			// 等于起始索引加上图片在当前页的索引加1
			var num =$("img").index(this) + 1;
			$("#numNow").text(num);
		});

，如果写成上面这样，就会出现以下效果，无论是在哪一页，点击笑脸所获取到的都只会是第1-5条

关键代码

var num = startIndex + $("img").index(this) + 1;

每次点击页码都局部刷新数据，显示该页码内容

// 分页器点击事件
$(".pagination a").click(function() {
	$("span").remove("#pageIndex");
	var currentPage = $(this).data("page");
	//显示当前是第几页
	$("#pageNow").text(currentPage);
	showPage(currentPage);
});

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态数据分页</title>
	<style>
		/* 样式 */
		table {
			border-collapse: collapse;
			margin: 20px auto;
			font-size: 16px;
			text-align: center;
		}

		table th,td {
			border: 1px solid #ccc;
			padding: 10px;
		}

		.pagination {
			display: flex;
			justify-content: center;
			margin: 20px 0;
		}
		.pagination a {
			display: inline-block;
			padding: 5px 10px;
			border: 1px solid #ccc;
			margin-right: 10px;
			margin-left: 10px;
		}
		.pagination a.active {
			background-color: #ccc;
		}
		.pagination button:last-of-type {
			margin-right: 15px;
		}
		.pagination span[id="#numAll"] {
			margin-right: 10px;
		}
		.pagination span {
			padding: 5px 0;
		}
		img {
			width: 24px;
			height: 24px;
		}
	</style>
</head>
<body>
	<table id="table">
		<thead>
			<tr>
				<th>/</th>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>出生日期</th>
				<th>爱好</th>
			</tr>
		</thead>
		<tbody id="tbody">
		</tbody>
	</table>
	<div class="pagination">
	</div>
	<script src="jquery/jquery-1.11.3.js" type="text/javascript"></script>
	<script>
		$(function() {
			// JSON数据
			$.ajax({
				url: "js/student.json",
				success: function(datas) {
					var str = datas;
					// 每页显示的数据量
					var pageSize = 5;
					// 获取总页数,使用Math.ceil()对页数进行向上取整
					var pageCount = Math.ceil(str.length / pageSize);
					// 初始化分页器
					for (var i = 1; i <= pageCount; i++) {
						$(".pagination").append($("<a href='#' data-page='" + i + "'>" + i + "</a>"));
					}
					$(".pagination").append($("<span id='line1'>/</span>"));
					$(".pagination").append($("<span id='line2'>/</span>"));
					$("<span id='#numIndex'>第" + "<span id='numNow'>1</span>" + "条</span>").insertBefore(
							$("#line1"));
					$("<span id='#numAll'>共" + str.length + "条</span>").insertAfter($("#line1"));
					$("<span id='#pageIndex'>第" + "<span id='pageNow'>1</span>" + "页</span>")
							.insertBefore($("#line2"));
					$("<span id='#pageAll'>共" + pageCount + "页</span>").insertAfter($("#line2"));
						// 默认显示第一页
					showPage(1);
					
					// 分页器点击事件
					$(".pagination a").click(function() {
						$("span").remove("#pageIndex");
						var currentPage = $(this).data("page");
						// console.log($(this).data("page"));
						$("#pageNow").text(currentPage);
						showPage(currentPage);
					});
					// 显示指定页的数据
					function showPage(currentPage) {
						// 清空表格数据和分页器的激活状态
						$("#tbody").empty();
						$(".pagination a").removeClass("active");
						// 根据当前页计算出起始索引和结束索引
						var startIndex = (currentPage - 1) * pageSize;
						var endIndex = startIndex + pageSize;
						console.log(startIndex);
						// 显示当前页的数据
						for (var i = startIndex; i < endIndex && i < str.length; i++) {
							var item = str[i];
							var tr = "<tr><td>" + "<img src='img/omg.png'/></<td><td>" + item.number +
								"</td><td>" + item.name + "</td><td>" +
								item.age + "</td><td>" + item.gender + "</td><td>" + item.birthday +
								"</td><td>" + item.hobby + "</td></tr>";
							$("#tbody").append(tr);
							// console.log($("input").index());
						}
						// 单击每条数据前的笑脸可以显示当前数据在数组中的位置
						$("img").click(function() {
							// 每次单击都先将前一次的数据清空
							$("#numNow").empty();
							// 等于起始索引加上图片在当前页的索引加1
							var num = startIndex + $("img").index(this) + 1;
							// var num =$("img").index(this) + 1;
							$("#numNow").text(num);
							// 给当前页对应的分页器添加状态
							$(".pagination a[data-page='" + currentPage + "']").addClass("active");
						}
					}
				});
			});
		</script>
	</body>
</html>

柠檬精不吃柠檬

关注

17
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery+Ajax实现动态数据分页

定义每页显示的数据量、获取总页数（数据总数%数据量），使用Math.ceil（）对总页数向上取整。，如果写成上面这样，就会出现以下效果，无论是在哪一页，点击笑脸所获取到的都只会是第1-5条。注意获取数据位置时要加上起始索引，否则每一次获取都只是在当前页的位置。每次单击笑脸会获取当前数据在json中的位置。每次点击页码都局部刷新数据，显示该页码内容。初始化分页器，关键代码。
复制链接

扫一扫