jquery li ul 伪分页_前端JQ实现伪分页

毕设的使用ssm+maven来写的，有个分页的需求，由于仅仅是毕设，涉及到的数据量不大，为了多个分页的功能(说不定就因为这个功能加分呢。。。)，但又不想去动sql，写limit，于是灵机一动，先把数据取到前端，利用append来动态渲染页面，实现一个伪分页的效果岂不是妙哉，话不多说，上代码：

分页

.table-part{

overflow: hidden;

}

• 选择
• 姓名
• 邮箱
• 职位
• 所属部门

$(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 = '< '

for(var j=1;j<=PageCount;j++){

if(currentPage == j){

pageHtml += ''+j+''

} else {

pageHtml += ''+j+''

}

}

pageHtml += '>';

$('.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

var jobPos = getPos(data[i].grade);

var dataHtml = '

• '

+'

'

+''

+''

+'

'

+'

'+data[i].name+''

+'

'+data[i].account+''

+'

'+jobPos+''

+'

'+data[i].department.dName+''

+'';

pageData.push(dataHtml);

}

} else {

var dataHtml = '

该部门下暂时还没有员工！！！

';

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

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");

}

}

没投入太多时间去完善这个代码，不过如果仅仅是基本的需求的话(切记数据量不要太大，如果数据量很大我猜是会相当耗资源)，以上代码就足够用了。

效果：