畢設(shè)是用ssm+maven來寫的肺稀，半路上車第股，遇到了分頁的需求。
由于僅僅是畢設(shè)话原，設(shè)計(jì)的數(shù)據(jù)量不大夕吻，為了多個(gè)分頁的功能（說不定就因?yàn)檫@個(gè)功能加分呢。繁仁。涉馅。），但又不想去動(dòng)sql黄虱，寫limit稚矿，于是靈機(jī)一動(dòng)，先把數(shù)據(jù)取到前端捻浦，利用append來動(dòng)態(tài)渲染頁面晤揣，實(shí)現(xiàn)一個(gè)偽分頁的效果豈不是妙哉。
話不多說朱灿，上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="js/Centerm.js" ></script>
<link rel="stylesheet" href="css/Centerm.css" />
<title>分頁</title>
<style>
.table-part{
overflow: hidden;
}
</style>
</head>
<body>
<div class="table-part">
<div class="table_head">
<ul class="list-head list">
<li class="choose-man choose-all">選擇</li>
<li class="man-name">姓名</li>
<li class="man-email">郵箱</li>
<li class="man-position">職位</li>
<li class="man-branch">所屬部門</li>
</ul>
</div>
<div class="table_body"></div>
<div class="page"></div>
</div>
<script>
$(function(){
// 模擬了從數(shù)據(jù)庫中返回的Json數(shù)據(jù)
var user = [{"id":1,"account":"yangyan@163.com","name":"啦啦啦","password":"6223A9E9F170AD4AC5FCDBD748020B72E9CCBC30877F929C9C6A0D7F","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升騰智能研發(fā)中心","pid":null}},{"id":17,"account":"111@test.com","name":"111","password":"F20941E2CEAAFF0AEE7B48500E7B85472155FFDF2E72DB9075CEBB8E","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升騰智能研發(fā)中心","pid":null}},{"id":18,"account":"122@test.com","name":"122","password":"5BE1612EAA0D56FDE474AE057E4E8270067DD57CD7ADEFAA92271B70","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升騰智能研發(fā)中心","pid":null}},{"id":4,"account":"yjz@test.com","name":"yjz","password":"A59E1F262DED280DC434CE1244B3E8D1D1434A7C751316D087EF5FE6","status":2,"deptId":101,"grade":2,"department":{"dId":101,"level":1,"dName":"產(chǎn)品經(jīng)理組","pid":1}},{"id":8,"account":"22@test.com","name":"22","password":"318B0D08889C7C3C4382065FF1DCF79DAE78AC466DDC683D92236C6B","status":2,"deptId":10207,"grade":2,"department":{"dId":10207,"level":2,"dName":"深圳研究中心","pid":102}},{"id":7,"account":"11@test.com","name":"11","password":"FECB6EFE632F3451D8E7C462A33EB57386CDDC9D602C6192BE18D941","status":2,"deptId":10301,"grade":2,"department":{"dId":10301,"level":2,"dName":"軟件-接口應(yīng)用部","pid":103}},{"id":2,"account":"yy@test.com","name":"哦哦哦","password":"8C20AEF91678539D184392500AD135839355F4B61C9D10566BE06658","status":2,"deptId":10201,"grade":3,"department":{"dId":10201,"level":2,"dName":"PC組","pid":102}},{"id":6,"account":"y@test.com","name":"olabala","password":"CB6CF3CE0118CE422B712B6FF95B6ADAAA3345844B9D5DD2E240A60C","status":2,"deptId":10201,"grade":3,"department":{"dId":10201,"level":2,"dName":"PC組","pid":102}},{"id":3,"account":"test@163.com","name":"test","password":"B16006741243AB13CE87E50E96E1BAAE291252523E7A7439771AF814","status":2,"deptId":10202,"grade":3,"department":{"dId":10202,"level":2,"dName":"認(rèn)證研究組","pid":102}},{"id":9,"account":"33@test.com","name":"33","password":"0D636329AA7B169155B58A8018746D477D3A5DD629775D749A275E79","status":2,"deptId":10206,"grade":3,"department":{"dId":10206,"level":2,"dName":"供應(yīng)商管理組","pid":102}},{"id":5,"account":"aaa@153.com","name":"yyy","password":"A8D912D74516037EAF00C0B36F0F41B3CF654FB663C1B636325725D2","status":2,"deptId":10206,"grade":3,"department":{"dId":10206,"level":2,"dName":"供應(yīng)商管理組","pid":102}},{"id":14,"account":"88@test.com","name":"88","password":"D10695CCBD2D39D5F5A69475E0DA802009E3C24E638C696CD94DF54C","status":2,"deptId":10301,"grade":3,"department":{"dId":10301,"level":2,"dName":"軟件-接口應(yīng)用部","pid":103}},{"id":13,"account":"77@test.com","name":"77","password":"CD97FC8794E0AAB9ADEB0354DC2929257A56A4DA5CA7E0042506E3C1","status":2,"deptId":10303,"grade":3,"department":{"dId":10303,"level":2,"dName":"技術(shù)研究部","pid":103}},{"id":12,"account":"66@test.com","name":"66","password":"64D2D97D56AB295C55C6C1B48B826E8551AB5990C83AD8935AD4416F","status":2,"deptId":10401,"grade":3,"department":{"dId":10401,"level":2,"dName":"軟件-業(yè)務(wù)應(yīng)用部","pid":104}},{"id":11,"account":"55@test.com","name":"55","password":"6D8149E9B7C3BC3590A1D713270D224697A23BB501D4B5087F83D307","status":2,"deptId":10402,"grade":3,"department":{"dId":10402,"level":2,"dName":"軟件-應(yīng)用系統(tǒng)部","pid":104}},{"id":10,"account":"44@test.com","name":"44","password":"EDF05F312C733EC469878AF8DE4E8326D38A50073F48FFC24A8E8501","status":2,"deptId":10403,"grade":3,"department":{"dId":10403,"level":2,"dName":"質(zhì)量管理部","pid":104}}];
var userList = renderUserData(user);
var Count = userList.length; //記錄條數(shù)
var PageSize=10; //設(shè)置每頁示數(shù)目
var PageCount=Math.ceil(Count/PageSize); //計(jì)算總頁數(shù)
var currentPage =1; //當(dāng)前頁昧识，默認(rèn)為1
if(PageCount > 1){
$('.page').show();
var pageHtml = '<a href="javascript:;" class="disable prev"><</a> '
for(var j=1;j<=PageCount;j++){
if(currentPage == j){
pageHtml += '<a href="javascript:;" class="current">'+j+'</a>'
} else {
pageHtml += '<a href="javascript:;">'+j+'</a>'
}
}
pageHtml += '<a href="javascript:;" class="next">></a>';
$('.page').empty().append(pageHtml)
} else {
$('.page').hide();
}
//默認(rèn)顯示第一頁
renderPage($('.table_body'),userList,currentPage,PageSize);
$('.page').on('click','a:not(.next):not(.prev)',function(){
currentPage = $(this).text();
$(".current").removeClass("current");
$(this).addClass("current");
disabledPageBtn();
renderPage($('.table_body'),userList,currentPage,PageSize);
})
$('.page').on('click','.next:not(.disable)',function(){
currentPage += 1;
$(".current").removeClass("current").next('a:not(.next)').addClass('current');
disabledPageBtn();
renderPage($('.table_body'),userList,currentPage,PageSize);
})
$('.page').on('click','.prev:not(.disable)',function(){
currentPage -= 1;
$(".current").removeClass("current").prev('a:not(.prev)').addClass('current');
disabledPageBtn();
renderPage($('.table_body'),userList,currentPage,PageSize);
})
})
// 將json數(shù)據(jù)拼接成html數(shù)組
function renderUserData(data) {
var pageData=[];
if (data.length !== 0) {
for (let i = 0; i<data.length; i++) {
var jobPos = getPos(data[i].grade);
var dataHtml = '<ul class="list-content list">'
+'<li class="choose-man">'
+'<input name="select-items" type="checkbox" />'
+'<input name="userId" class="userId" type="hidden" value="'+data[i].id+'"/>'
+'</li>'
+'<li class="man-name">'+data[i].name+'</li>'
+'<li class="man-email email-type">'+data[i].account+'</li>'
+'<li class="man-position">'+jobPos+'</li>'
+'<li class="man-branch">'+data[i].department.dName+'</li>'
+'</ul>';
pageData.push(dataHtml);
}
} else {
var dataHtml = '<div class="full-page">該部門下暫時(shí)還沒有員工！５涟恰跪楞！</div>';
pageData.push(dataHtml);
}
return pageData;
}
function getPos(grade){
if(grade === 1) {
return "管理員";
} else if(grade === 2){
return "主管";
} else {
return "普通員工";
}
}
// 渲染每頁內(nèi)容
function renderPage(obj,data,currentPage,PageSize){
obj.empty();
for(var i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){
obj.append(data[i]);
}
}
// 判斷上頁、下頁按鈕是否可用
function disabledPageBtn(){
// 上頁
if($('.current').prev('a').hasClass('prev')){
$(".prev").addClass("disable");
} else {
$(".prev").removeClass("disable");
}
//下頁
if($('.current').next('a').hasClass('next')){
$(".next").addClass("disable");
} else {
$(".next").removeClass("disable");
}
}
</script>
</body>
</html>
沒投入太多時(shí)間去完善這個(gè)代碼侣灶，不過如果僅僅是基本的需求的話（切記數(shù)據(jù)量不要太大习霹，如果數(shù)據(jù)量很大我猜是會(huì)相當(dāng)耗資源），以上代碼就足夠用了炫隶。
效果：
page.gif
