刚毕业找工作做的笔试题有一道分页的题，当时学的东西很少，不会做，后来工作中经常要用到，由于公司平移台设置了好几套界面皮肤，插件找到也不好用，就尝试着手写了一下，果然还是自己手写的样式好调整。
有两个参数curr，total
下面是一个函数，通过传入curr：当前页，total：总页数，可以返回一个list，可以设置现实的页面
//分页
function pagelist(curr, total) {
var list = [];
if(total < 7) {
for(var r = 1; r < total + 1; r++) {
list.push(r);
}
} else {
if(curr < 4) {
list = [1,2,3,4,'...',total];
} else {
if(curr > total - 3) {
list = [1, '...', total-3,total-2,total-1,total];
} else {
list = [1,'...',curr-1, curr, curr+1,'...',total];
}
}
}
return list;
}
拿到渲染的页面list后可以重新渲染页面内容
//页面按钮渲染
function setpage(curr, total) {
var list = pagelist(curr, total);
$("#espage").empty();
$("#espage").append('<li><a class="pageitem" id="pre">上一页</a></li>');
for(var q = 0; q < list.length; q++) {
if(list[q] == curr) {
$("#espage").append('<li><a class="pageitem pageitemactive">'+ list[q] +'</a></li>');
} else {
if(list[q] == '...') {
$("#espage").append('<li><a class="pageitem">'+ list[q] +'</a></li>');
} else {
$("#espage").append('<li><a class="pageitem pageuse">'+ list[q] +'</a></li>');
}
}
}
$("#espage").append('<li><a class="pageitem" id="next">下一页</a></li>');
}
这样拆分容易修改样式，添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<style>
body {
background: #1f2b36;
}
.messagebox {
position: absolute;
width: 900px;
height: calc(100% - 300px);
top: 100px;
left: 50%;
margin-left: -450px;
background: #fff;
overflow: auto;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.messagebtng {
position: absolute;
left: 50%;
margin-left: 450px;
top: 150px;
}
.messagebtn {
width: 88px;
height: 36px;
font-size: 14px;
line-height: 36px;
text-align: center;
color: #fff;
background: #607d8b!important;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
margin: 20px;
cursor: pointer;
letter-spacing: 1px;
}
.messagebtn:hover {
background: #4c636e!important;
}
.messagebtnon {
position: absolute;
height: 36px;
width: 36px;
font-size: 18px;
line-height: 36px;
top: 20px;
right: -36px;
color: #607d8b;
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
/***************************************************/
.page {
position: absolute;
bottom: 150px;
width: 100%;
height: 40px;
text-align: center;
}
.pageitem {
background: #4c636e!important;
color: #fff !important;
border: none !important;
margin: 0 2px;
border-radius: 0% !important;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
letter-spacing: 1px;
cursor: pointer;
}
.pageitem:hover {
background: #304a57 !important;
}
.pageitemactive {
background: #3a95be!important;
color: #fff !important;
}
.pageitemactive:hover {
background: #3a95be!important;
color: #fff !important;
}
</style>
<body>
<div class="page">
<ul class="pagination" id="espage">
</ul>
</div>
<div class="messagebtng">
<div class="messagebtn arroron">全部</div>
<div class="messagebtn arroron">已回复</div>
<div class="messagebtn arroron">未回复</div>
<div class="messagebtn arroron">全部展开</div>
<div class="messagebtn arroron">全部收起</div>
<div class="messagebtnon"><i class="fa fa-arrow-left"></i></div>
</div>
</body>
<script>
$(".arroron").on("click", function() {
switch($(this).text()) {
case '全部':
$(".messagebtnon").css("top", "20px");
break;
case '已回复':
$(".messagebtnon").css("top", "76px");
break;
case '未回复':
$(".messagebtnon").css("top", "132px");
break;
}
});
var curr = 1,
total = 10;
setpage(curr, total);
//分页事件
$(document).on('click', '.pageuse', function() {
curr = parseInt($(this).text());
setpage(curr, total);
});
//上一页
$(document).on('click', '#pre', function() {
if(curr > 1) {
curr = curr - 1;
setpage(curr, total);
}
});
//下一页
$(document).on('click', '#next', function() {
if(curr < total) {
curr = curr + 1;
setpage(curr, total);
}
});
//分页
function pagelist(curr, total) {
var list = [];
if(total < 7) {
for(var r = 1; r < total + 1; r++) {
list.push(r);
}
} else {
if(curr < 4) {
list = [1,2,3,4,'...',total];
} else {
if(curr > total - 3) {
list = [1, '...', total-3,total-2,total-1,total];
} else {
list = [1,'...',curr-1, curr, curr+1,'...',total];
}
}
}
return list;
}
//页面按钮渲染
function setpage(curr, total) {
var list = pagelist(curr, total);
$("#espage").empty();
$("#espage").append('<li><a class="pageitem" id="pre">上一页</a></li>');
for(var q = 0; q < list.length; q++) {
if(list[q] == curr) {
$("#espage").append('<li><a class="pageitem pageitemactive">'+ list[q] +'</a></li>');
} else {
if(list[q] == '...') {
$("#espage").append('<li><a class="pageitem">'+ list[q] +'</a></li>');
} else {
$("#espage").append('<li><a class="pageitem pageuse">'+ list[q] +'</a></li>');
}
}
}
$("#espage").append('<li><a class="pageitem" id="next">下一页</a></li>');
}
</script>
</html>
