毕设是用ssm+maven来写的，半路上车，遇到了分页的需求。
由于仅仅是毕设，设计的数据量不大，为了多个分页的功能（说不定就因为这个功能加分呢。。。），但又不想去动sql，写limit，于是灵机一动，先把数据取到前端，利用append来动态渲染页面，实现一个伪分页的效果岂不是妙哉。
话不多说，上代码：
<!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(){
// 模拟了从数据库中返回的Json数据
var user = [{"id":1,"account":"yangyan@163.com","name":"啦啦啦","password":"6223A9E9F170AD4AC5FCDBD748020B72E9CCBC30877F929C9C6A0D7F","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升腾智能研发中心","pid":null}},{"id":17,"account":"111@test.com","name":"111","password":"F20941E2CEAAFF0AEE7B48500E7B85472155FFDF2E72DB9075CEBB8E","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升腾智能研发中心","pid":null}},{"id":18,"account":"122@test.com","name":"122","password":"5BE1612EAA0D56FDE474AE057E4E8270067DD57CD7ADEFAA92271B70","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升腾智能研发中心","pid":null}},{"id":4,"account":"yjz@test.com","name":"yjz","password":"A59E1F262DED280DC434CE1244B3E8D1D1434A7C751316D087EF5FE6","status":2,"deptId":101,"grade":2,"department":{"dId":101,"level":1,"dName":"产品经理组","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":"软件-接口应用部","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":"认证研究组","pid":102}},{"id":9,"account":"33@test.com","name":"33","password":"0D636329AA7B169155B58A8018746D477D3A5DD629775D749A275E79","status":2,"deptId":10206,"grade":3,"department":{"dId":10206,"level":2,"dName":"供应商管理组","pid":102}},{"id":5,"account":"aaa@153.com","name":"yyy","password":"A8D912D74516037EAF00C0B36F0F41B3CF654FB663C1B636325725D2","status":2,"deptId":10206,"grade":3,"department":{"dId":10206,"level":2,"dName":"供应商管理组","pid":102}},{"id":14,"account":"88@test.com","name":"88","password":"D10695CCBD2D39D5F5A69475E0DA802009E3C24E638C696CD94DF54C","status":2,"deptId":10301,"grade":3,"department":{"dId":10301,"level":2,"dName":"软件-接口应用部","pid":103}},{"id":13,"account":"77@test.com","name":"77","password":"CD97FC8794E0AAB9ADEB0354DC2929257A56A4DA5CA7E0042506E3C1","status":2,"deptId":10303,"grade":3,"department":{"dId":10303,"level":2,"dName":"技术研究部","pid":103}},{"id":12,"account":"66@test.com","name":"66","password":"64D2D97D56AB295C55C6C1B48B826E8551AB5990C83AD8935AD4416F","status":2,"deptId":10401,"grade":3,"department":{"dId":10401,"level":2,"dName":"软件-业务应用部","pid":104}},{"id":11,"account":"55@test.com","name":"55","password":"6D8149E9B7C3BC3590A1D713270D224697A23BB501D4B5087F83D307","status":2,"deptId":10402,"grade":3,"department":{"dId":10402,"level":2,"dName":"软件-应用系统部","pid":104}},{"id":10,"account":"44@test.com","name":"44","password":"EDF05F312C733EC469878AF8DE4E8326D38A50073F48FFC24A8E8501","status":2,"deptId":10403,"grade":3,"department":{"dId":10403,"level":2,"dName":"质量管理部","pid":104}}];
var userList = renderUserData(user);
var Count = userList.length; //记录条数
var PageSize=10; //设置每页示数目
var PageCount=Math.ceil(Count/PageSize); //计算总页数
var currentPage =1; //当前页，默认为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();
}
//默认显示第一页
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数据拼接成html数组
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">该部门下暂时还没有员工！！！</div>';
pageData.push(dataHtml);
}
return pageData;
}
function getPos(grade){
if(grade === 1) {
return "管理员";
} else if(grade === 2){
return "主管";
} else {
return "普通员工";
}
}
// 渲染每页内容
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>
没投入太多时间去完善这个代码，不过如果仅仅是基本的需求的话（切记数据量不要太大，如果数据量很大我猜是会相当耗资源），以上代码就足够用了。
效果：
page.gif
网友评论