最近在忙着开发项目，还有给女朋友找工作，好久没更新博客了，嘿嘿~
闲话不多说，进入正题吧。开发的这个项目，比较注重前台展示，所以前台的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();
}
});
}
至此，前后台分页完成了，菜鸟的分页完成了。
相关推荐
ssm后台分页，实现按条件查询进行后台分页，数据库用的mysq
前后台page分页
对于Flex +BlazeDS+java开发的项目分页组件的实现，基本设计是分页ui组件负责前台分页的显示，后台java实现sql分页查询。 附带源码。
对结果集list在代码层面进行分页处理。
mvc 分页 核心代码 前后台
NULL 博文链接：https://lucky16.iteye.com/blog/1522254
实现分页功能，实现首页，下一页，上一页，末页的功能
如题功用，网上没找到后台分页比较方便的，自己写了一个，希望能方便大家，另初学，调试是通过的，不过有BUG的话多包涵。 前台分页技术和后台分页技术都兼容xml和json格式的数据。前台分页比较简单，后台分页可以...
整理文档，搜刮出一个jquery DataTable实现前后台动态分页，稍微整理精简一下做下分享。 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
ajax请求后台数据实现分页功能
angularjs分页实例
善筹网（众筹）前后台-善筹网（众筹）前后台系统-善筹网（众筹）前后台系统源码-善筹网（众筹）前后台管理系统-善筹网（众筹）前后台管理系统java代码-善筹网（众筹）前后台系统设计与实现-基于springboot的善筹网...
分页的几种写法： 第一种、从DataSet里筛选分页行的数据 第二种、直接SQL语句ROW_NUMGER() OVER(ORDER BY T.ID DESC) 第三种、最简单写法 (select top @pageSize*(@pageIndex-1)
行式引擎按页取数只适用于Oracle,mysql,hsql和sqlserver2008及以上数据库，其他数据库，如access，sqlserver2005，sqlite等...今天我们以Access数据库为例介绍需要写分页SQL的数据库怎样利用行式的引擎实现层式报表。
后台用java实现动态查询数据、分页。 表格数据的总记录数，每页条数，总页数，上/下一页，首页，末页等基本功能元素都有相应的函数实现，可作为基本分页功能的学习。 缺点：css文件涉及的图片是缺失的，用户可自行...
displaytag 一个后台管理的分页组件，非常好用，代码量少
根据当前页和总页数自动分页,每点击以下就会跳转当前url+page=跳转的页数,附带跳转至n页;
java后台分页，对于开发中经常用到的分页，非常实用
利用jquery实现表格动态分页，前台用jquery实现。后台用java实现动态查询数据，分页。