分页可能是许多小白比较痛苦的一件事,之前我也写了好几个分页都不太令人满意。在经过多次练习后,写出来应该比较好的分页了吧。
我将它写成一个模板,如果大家需要这个模板,可以到这里去下载。
地址: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属性
}
}
}
});
}