同步页面切换按钮组的实现

本文采用伪代码的方式实现，理解思路即可。

在本文中，每页最大能显示5个按钮，当前页置高亮。

先来看看实现的效果，当前页为3时，如下图所示：

当前页为5时，如下所示：

每页显示的按钮数量为pageSingleCount；每页起始位置的按钮标号为initialBtn；每页结束位置的按钮标号为maxBtnInSinglePage；当前页的的标示为currentPage

在这里，pageSingleCount = 5；

maxBtnInSinglePage = initialBtn + pageSingleCount；

模板的伪代码如下

ul.BoxOfBtns//按钮组的盒子//for循环中循环条件为//initialBtn，（当前页面）按钮组的第一个按钮号码//maxBtnInSinglePage，（当前页面）按钮组的最后一个按钮-for (initialBtn; initialBtn < maxBtnInSinglePage; initialBtn++) {-if(currentPage == initialBtn){  li.pageBtn.active #{currentPage} //当前页的按钮添加高亮样式.active-}-else{  li.pageBtn//其余按钮，用以跳转到其他页面，并添加查询字符串以标示当前页    a(href="/recruit/school?p=#{initialBtn}") #{initialBtn}-}-}

后台代码如下：

var length = msgs.length;//总信息数，其中msgs是从数据库中查询到的数据集合var infoSingleCount = 10;//每页的信息数var totalPage = Math.ceil(length/infoSingleCount);//一共有多少页var pageSingelCount = 5;//人为设定的每页按钮数量var halfBtns = Math.floor(pageSingelCount/2);//每页总按钮数量的一半var currentPage = parseInt(req.query.p,10)||0;//currentPage由查询字符串获取，为当前页码var initialBtn = currentPage-halfBtns;//每页的按钮起始号码if (initialBtn<=0) {initialBtn = 0;}var maxBtnInSinglePage = initialBtn+pageSingelCount;//每页最大的按钮号码if (maxBtnInSinglePage>=totalPage) {maxBtnInSinglePage = totalPage;}var index = currentPage*infoSingleCount;//获取每页的信息起始标号var singleShowInfos = msgs.slice(index,index+infoSingleCount);//从总信息中把要显示的信息截取出来//渲染res.render('jade_template',{msgs:singleShowInfos,currentPage:currentPage,totalPage:totalPage,initialBtn:initialBtn,maxBtnInSinglePage:maxBtnInSinglePage});