完整的分页程序+后台数据请求_js 定时请求后台分页数据async fetch-优快云博客

本文链接：https://blog.youkuaiyun.com/WWW_share8/article/details/80154974

本文介绍了一种实用的分页实现方案，包括HTML、CSS布局及jQuery交互逻辑，并提供了一个可下载的模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分页可能是许多小白比较痛苦的一件事，之前我也写了好几个分页都不太令人满意。在经过多次练习后，写出来应该比较好的分页了吧。

我将它写成一个模板，如果大家需要这个模板，可以到这里去下载。

地址：https://download.youkuaiyun.com/download/www_share8/10384821

现在我来说一下我的分页吧，向上代码

1，最基本的html页面+css的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分页类型</title>
		<link rel="stylesheet" type="text/css" href="css/fen.css" />
		<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="stu_page">
			<ul class="pagination_1">
			    <li><a><<</a></li>
			    <li class="active1"><a>1</a></li>
			    <li><a>2</a></li>
			    <li><a>3</a></li>
			    <li><a>4</a></li>
			    <li><a>5</a></li>
			    <li><a>>></a></li>
			</ul>
		</div>
	</body>
	<script src="js/fen.js" type="text/javascript"></script>
</html>

css

*{margin: 0px;padding: 0px;}
.stu_page{
	text-align: center;
	height: 50px;
	margin-top: 200px;
}
.stu_page>ul{
	background-color: #ddd;
	margin-top: 20px;
}
.stu_page>ul>li{
	width: 55px;
	cursor: pointer;
	margin-left: 2px;
	padding: 9px 0px;
}
.stu_page>ul>li>a{
	cursor: pointer;
}
.pagination_1 {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination_1>li{
	float: left;
	list-style: none;
	background-color: #cfc;
	border-radius: 5px;
}
.pagination_1 a{
	text-decoration: none;
}
.pagination_1 a:hover{
	text-decoration: none;
}
/*选中样式*/
.active1{
	background-color: #F0ad4e!important;
	color: #fff;
	z-index: 2;
    cursor: default;
}

现在是最关键的js文件

$(".stu_page>ul").delegate('li','click',function(){
	//可以选择的情况下，如果获取的是>>则就将页码数据更改
	if($(this).text()=='>>'){
		console.log('>>')
		var act_num=parseInt($(".active1>a").html());//获取现在所处的位置
		var te_num=act_num%5;//对应到li所处的位置上
		var last_right_num=parseInt($(".stu_page>ul>li:eq(5)>a").html());//获取最右边的数字
		console.log(act_num,last_right_num);
		if(act_num<last_right_num){//当目前所处的位置没有抵达最后一个时
			$(".stu_page>ul>li:eq("+(te_num+1)+")").addClass('active1').siblings().removeClass('active1');//为下一个添加选中状态
			//stu_pp((act_num+1));//调用上面的函数，这里面的函数是发送ajax请求后台数据的
		}else{
			var top_num=parseInt(act_num);//留住上一页的号码
			for(var i=1;i<6;i++){
				$(".stu_page>ul>li:eq("+i+")>a").text('');//先移除
				$(".stu_page>ul>li:eq("+i+")>a").text((top_num+1));
				top_num++;
			}
			//stu_pp((top_num+1));//申请翻页的数据
			$(".stu_page li:eq(1)").addClass('active1').siblings().removeClass('active1');//为第一个添加选中状态
		}

	}else if($(this).text()=='<<'){
		console.log('<<');
		var act_num=parseInt($(".active1>a").html());//获取现在所处的位置
		var te_num=act_num%5;//对应到li所处的位置上
		if(te_num==0){//给最后一个赋值
			te_num=5;
		}
		var last_num=parseInt($(".stu_page>ul>li:eq(1)").text());//获取<<箭头旁边的数字
		if(act_num==1){//拦住小于1的
			alert("老铁都到第一页了，你还点啊！")
		}else{
			if(act_num>last_num&&te_num!=1){//不需要翻页的情况下
				$(".stu_page>ul>li:eq("+(te_num-1)+")").addClass('active1').siblings().removeClass('active1');//为下一个添加选中状态
				//stu_pp((act_num-1));//调用上面的函数
			}else{//需要翻页的情况下
				$(".stu_page li").removeClass("hide");//移除>>右箭头所隐藏的hide
				for(var i=5;i>0;i--){
    				$(".stu_page li:eq("+i+")>a").text('');//先移除
    				$(".stu_page li:eq("+i+")>a").text((last_num-1));
    				last_num--;
				}
				//stu_pp((act_num-1));//调用上面的函数
				$(".stu_page li:eq(5)").addClass('active1').siblings().removeClass('active1');//为第5个添加选中状态
			}
		}	
	}else{//鼠标直接点击时
		//console.log('12555');
		var page_num=parseInt($(this).text());//获取所选中的页码数字并转化为int型
		$(this).addClass('active1').siblings().removeClass('active1');//为选中添加状态，移除其兄弟元素的选中状态
		//stu_pp(page_num);//调用上面的函数
	}
});

请求数据的函数是，仅仅是将强求的数据刷新到页面上去

function stu_pp(page_num){
$.ajax({
    type:"get",
    url:"/admin/stu_manage",
    async:true,
    data:{"num":page_num},
    success:function(data){
	   if(data.result==-1){
		    $(".st_tbody").text("暂无内容，请先添加");
		    var p_num=page_num%5;//对应到相应的li上去
		    for(var z=(p_num+1);z<7;z++){
			    $(".stu_page li:eq("+z+")").addClass('hide');//将后面没有的数据时，打页面隐藏
		    }
	    }else{
		    console.log(data.data);
		    $(".st_tbody").text('');//将之前数据清空
		    //将数据刷到页面上去		
		    for(var i=0;i<data.data.length;i++){
			    $(".st_tbody").append("<tr><td><input type='checkbox'/></td><td></td><td></td><td></td><td><button class='btn recompose alter'>修改</button><button class='btn btn-warning delete'>删除</button></td></tr>");//为tbody里加入行
			    $(".st_tbody>tr:eq("+i+")>td:eq(1)").text(data.data[i].s_num);//打印每一行学号
			    $(".st_tbody>tr:eq("+i+")>td:eq(2)").text(data.data[i].s_class);//打印每一行名字
			    $(".st_tbody>tr:eq("+i+")>td:eq(3)").text(data.data[i].s_name);//打印每一行班级
			    $(".st_tbody>tr:eq("+i+")>td:eq(4)>button").attr("data-id",data.data[i].ID);//为每一行的按钮添加id属性
		    }
	    }
    }
});
}