剛畢業找工作做的筆試題有一道分頁的題,當時學的東西很少,不會做,後來工作中經常要用到,由於公司平移臺設置了好幾套界面皮膚,插件找到也不好用,就嘗試着手寫了一下,果然還是自己手寫的樣式好調整。
有兩個參數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>