最近在忙着开发项目,还有给女朋友找工作,好久没更新博客了,嘿嘿~
闲话不多说,进入正题吧。开发的这个项目,比较注重前台展示,所以前台的jquery用的比较多。因为接手这个项目的时候,已经有人做了一大半了,看别人很痛苦的,你们懂的。然后我还发现一件更坑爹的事,就是他的所有的分页都是前台分页的!数据量大的时候速度很慢,然后和接口组的同事探讨了下,原来也不是前面那个人的原因,原来是是涉及到的数据表比较多,接口组的同事嫌麻烦返回了所有的数据!what the fuck!我能说什么?只要找项目组长商量了(他都不知道做的是前台分页,我能说什么,哎),最后改了一部分(此处省略一万字。。。),还有一部分还是前台分页。好吧,你们赢了。作为一个菜鸟,也只有被宰割了。苦逼啊!
那么问题了,既有前台分页,又有后台分页,怎样才能让分页复用呢?这样既能保证样式统一,也不会出现代码的冗余
--------------思路--------------
1.首先不管是前台分页还是后台分页,共通点在于分页的思路是一样的,点击上一页或者下一页时要取到当前页的数据,也就是说我首先要知道的是数据总条数recordCount、每页限制显示的条数pageSize、当前页这三个关键参数pageIndex。
2.所以就有了这个pageBar.js用于实现分页功能,此js中控制翻页以及跳转页,此js接收recordCount,以及pageSize和pageIndex,当然如果想实现百度那种分页效果a便签点击跳转,控制总分页数maxShowPage
/** * Author : zhu.zhancai by 2014 * anjun 2015年2月25日 16:36:40修改 */ $.fn.pageBar = function(options) { var configs = { PageIndex: 1, PageSize: 0, TotalPage: 0, RecordCount: 0, maxShowPage : 10, onPageClick : function(pageIndex) { return false; } } $.extend(configs, options); var tmp = "", i = 0, currentPage = parseInt(configs.PageIndex); totalpage = parseInt(configs.RecordCount / configs.PageSize); totalpage = configs.RecordCount % configs.PageSize > 0 ? totalpage + 1 : totalpage; if (configs.PageIndex > 1) { tmp += "<a href='javascript:void(0)'>< 上一页</a>" } else { tmp += "<a class=\"no\" href='javascript:void(0)'>< 上一页</a>" } //用于控制是长分页还是短分页 if(configs.queryJudge!=null&&configs.queryJudge==1){ tmp += "<a href='javascript:void(0)'>"+currentPage+"</a>" }else{ tmp += "<a href='javascript:void(0)'>1</a>" if(totalpage >=configs.maxShowPage){ /*如果当前页面 - 标签数大于1 表示需要在左侧插入省略号, 如果当前页面+标签树小于页面总数 表示需要在右侧插入省略号*/ if(currentPage-2>1){ if(currentPage-3!=1){ tmp += "...." } tmp += "<a href='javascript:void(0)'>" + (currentPage-2)+ "</a>" tmp += "<a href='javascript:void(0)'>" + (currentPage-1)+ "</a>" } if(currentPage==3){ tmp += "<a href='javascript:void(0)'>" + (currentPage-1)+ "</a>" } if(currentPage!=1 && currentPage!=totalpage){ if(currentPage-1<3){ tmp += "<a href='javascript:void(0)'>" + currentPage+ "</a>" } tmp += "<a href='javascript:void(0)'>" + currentPage+ "</a>" } if(currentPage==totalpage-2){ tmp += "<a href='javascript:void(0)'>" + (currentPage+1)+ "</a>" } if(currentPage+2<totalpage){ tmp += "<a href='javascript:void(0)'>" + (currentPage+1)+ "</a>" tmp += "<a href='javascript:void(0)'>" + (currentPage+2)+ "</a>" if(totalpage-currentPage!=3){ tmp += "...." } } tmp += "<a href='javascript:void(0)'>" + totalpage + "</a>" }else if(totalpage<configs.maxShowPage){ for(i=2 ;i<=totalpage ;i++){ tmp += "<a href='javascript:void(0)'>" + i + "</a>" } } } if (configs.PageIndex < totalpage) { tmp += "<a href='javascript:void(0)'>下一页 ></a>" } else { tmp += "<a class=\"no\" href='javascript:void(0)'>下一页 ></a>" } var pager = this.html(tmp) var index = pager.children('input')[0]; pager.children('a').click(function() { var cls = $(this).attr('class'); if (this.innerHTML == '< 上一页') { if (cls != 'no') { configs.onPageClick(currentPage - 1) ; } } else if (this.innerHTML == '下一页 >') { if (cls != 'no') { configs.onPageClick(currentPage+1) } }else { if (cls != 'cur') { configs.onPageClick(parseInt(this.innerHTML) ); } } }).each(function() { if (configs.PageIndex == parseInt(this.innerHTML)) { $(this).addClass('cur') } }) }
3.前台伪分页的实现:第一次通过发送请求取到所有的数据(这时候可以得到recordCount,totalPage,和计算出可以分多少页,以及定义的pageSize)并且将第一页数据显示出来,将数据存储到全局变量中,第二次发送请求的时候其实是取出的剩余的数据
/*** 分页工具条*/ var $page = function(pageIndex){ var pageOptions = { PageIndex : pageIndex, PageSize : pageSize, RecordCount : recordCount, TotalPage : totalPage, maxShowPage : 10, onPageClick : function(pageIndex) { $paginationCache(pageIndex); return false; } } $('.g-pagerwp .g-pager').css('visibility', 'visible').pageBar(pageOptions); }调用$paginationCache()方法,取出数据
/** * 改用缓存数据load分页*/ var $paginationCache = function(pageIndex){ Index=pageIndex; var trArray = [] ; var currentIndex = 0 ; var length = 0 ; currentIndex = parseInt((Index - 1 ) * pageSize) ; /***是否为最后一页*/ if(window.$variable.Cachetotalpage == Index){ length = recordCount ; }else{ length = parseInt(Index * pageSize) ; } $("#info tr:not(#titleTr)").remove(); /** 此处获取数据显示**/ for(var i= currentIndex;i<length ;i++){ //代码 } $("#info").append(trArray.join('')); $page(Index) ; }4.后台分页的实现,比前台分页少一个步骤,思路基本一样,通过点击a标签或者下页,调用方法发送请求取到数据,不同的前台分页是取出缓存的数据,后台分页需要再次发送请求得到指定数据。java代码只负责取出指定数据,所有的分页操作通过js控制
/*后台分页显示函数*/ var $loadAdminPage = function(pageIndex){ $cleanAll(); url="请求路径"; $.ajax({ type : "post", url : basePath + url , async : true , dataType : "json", data : $variable.qryCondition + "¤tPage=" + pageIndex, beforeSend : loading() , success : function(data){ if(data==null){ $.DialogBySHF.Alert({ Width: 300, Height: 200, Title: "提示信息", Content: '此项目编码下没有订单' }); return; } recordCount = data["flowCount"]; var arrayObj = data["returnInfo"]["flowList"] ; var trArray = [] ; var length = arrayObj.length ; for(var i=0;i<length;i++){
//取出数据,并且显示 } $("#info").append(trArray.join('')); pageFilterFunction(); var pageOptions = { PageIndex : pageIndex, PageSize : pageSize, RecordCount : recordCount, TotalPage : totalPage, maxShowPage : 10, onPageClick : function(pageIndex) { $loadAdminPage(pageIndex); return false; } } $('#pageDiv .g-pager').css('visibility', 'visible').pageBar(pageOptions); },complete : function(){ $("#loading").hide(); } }); } 至此,前后台分页完成了,菜鸟的分页完成了。