自写的jQuery实现分页功能的分页组件：
功能效果如下：
分页组件就是上图中的三部分， 分别放在表格上部 和下部 。
其中，
1》》》页面的代码如下：
product.jsp
其中引用bootstrap.css 和bootstrap .js是必须的
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <% 6 String path = request.getContextPath(); 7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 8 %> 9 <!DOCTYPE HTML> 10 <html> 11 <head> 12 <meta charset="utf-8"> 13 <meta name="renderer" content="webkit|ie-comp|ie-stand"> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 16 <meta http-equiv="Cache-Control" content="no-siteapp" /> 17 18 <link href="../css/H-ui.min.css" rel="stylesheet" type="text/css" /> 19 <link href="../css/H-ui.admin.css" rel="stylesheet" type="text/css" /> 20 <link href="../css/style.css" rel="stylesheet" type="text/css" /> 21 <link href="../lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" /> 22 <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 23 24 <title>产品列表</title> 25 <style type="text/css" > 26 .pageInfo{ 27 display: inline; 28 } 29 </style> 30 </head> 31 <body> 32 33 <nav class="breadcrumb" style="padding: 0px 1px 20px 0px;margin-bottom: 0px;"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 基因信息管理 <span class="c-gray en">></span> 产品列表 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav> 34 35 <div class="pd-20"> 36 <div class="text-c"> 37 <select class="select" id="" name="" style="250px"> 38 <option value="0">产品</option> 39 <option value="AccountInfo">基因型</option> 40 <option value="AdminInfo">关键字</option> 41 </select> 42 <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 查询</button> 43 </div> 44 </div> 45 <div class="cl pd-5 bg-1 bk-gray mt-20"> 46 <span class="l"><a href="javascript:;" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a> 47 <a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont"></i> 添加产品</a></span> 48 </div> 49 50 51 <!-- 分页 + table 从这里开始 由于样式采用bootstrap，所以class样式尽量使用一致的 --> 52 <div class="container"> 53 <!-- 分页的第一部分 开始 --> 54 <div class="row" style="margin: 20px 0px 5px 10px;"> 55 <label class="pageInfo">每页显示 </label> 56 <select class="form-control pageInfo" style=" 20%"> 57 <option>5</option> 58 <option selected="selected">10</option> 59 <option>20</option> 60 <option>50</option> 61 <option>100</option> 62 </select> 63 <label class="pageInfo">条</label> 64 </div> 65 <!-- 分页的第一部分 结束 --> 66 <!-- table部分 开始 --> 67 <div class="row"><!-- 采用样式row 分成一层 一层 --> 68 <table class="table table-hover table-bordered table-bg"> 69 <thead> 70 <tr class="text-c"> 71 <th width="25"><input type="checkbox" id="ch1">全选</th> 72 <th width="80">产品名称</th> 73 <th width="280">操作</th> 74 </tr> 75 </thead> 76 <tbody> 77 </tbody> 78 </table> 79 </div> 80 <!-- table 部分结束 --> 81 <!-- 分页 第二部分 开始 --> 82 <div class="row"> 83 <!-- 第二部分左边部分开始 --> 84 <div class="pageInfo pull-left" style="position: relative;top: 32px; font-family: Times New Roman;">当前显示第<label class="startInfo"></label>条到第<label class="endInfo"></label> 条，总共<label class="totalInfo"></label>条</div> 85 <!-- 第二部分右边部分 开始 --> 86 <div class="pageInfo pull-right"> 87 <nav > 88 <ul class="pagination"> 89 <li> 90 <a href="#" aria-label="Previous" style="display: none"> 91 <span aria-hidden="true">«</span> 92 </a> 93 </li> 94 <li class="active"><a href="#">1</a></li> 95 <li> 96 <a href="#" aria-label="Next"> 97 <span aria-hidden="true">»</span> 98 </a> 99 </li> 100 </ul> 101 </nav> 102 </div> 103 </div> 104 <!-- 分页第二部分 结束 --> 105 </div> 106 107 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 108 <script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script> 109 <script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script> 110 <script type="text/javascript" src="../js/bootstrap.min.js"></script> 111 <script type="text/javascript" src="../lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 112 <script type="text/javascript" src="../js/H-ui.js"></script> 113 <script type="text/javascript" src="../js/H-ui.admin.js"></script> 114 <script type="text/javascript" src="../js/pageSet.js"></script> 115 <script type="text/javascript" src="../js/geneinfo/product/product.js"></script> 116 </body> 117 </html>
2》》》分页组件的js文件
pageSet.js
1 var page = {}; // 定义分页类 2 (// 这里用大括号将整个的类 包括【本类的属性定义】【本类的方法】 整体括起来，是让本类在页面加载的时候就运行 3 4 // tt这个类的字段定义 5 function() { 6 page.bindData; 7 page = function page(url, bindData) { 8 this.pageNo = 1; // 当前页 初始值为1 9 this.pageSize = 10; // 当前页显示多少条 10 this.startInfo = 1; // 开始条数 11 this.endInfo = 10; // 结束条数 12 this.totalPage = 0; // 总页数 13 this.totalInfo = 0; // 总条数 14 this.tempLi = "<li><a href='#'></a></li>"; // 用于添加页码处使用 15 this.url = url; // 用于不同页面的请求地址 16 this.result = null; // 用于可能仅需要正文数据时使用 17 this.bindData = bindData; 18 this.init(); 19 return this; 20 } 21 22 // 根据初始化的参数 bindData()绑定参数的方法 page初始化的对象 来请求后台，传回 新的page信息 23 page.prototype.pageSet = function() { 24 $.post(page.url, { 25 "pageNo" : page.pageNo, 26 "pageSize" : page.pageSize 27 }, function(data) { 28 result = null; 29 data = eval("(" + data + ")"); 30 if (data != null && data != "" && data != undefined) { 31 page.pageNo = data.pageNum == 0 ? 1 : data.pageNum; 32 page.pageSize = data.pageSize == 0 ? page.pageSize : data.pageSize; 33 page.startInfo = data.pageNum == 0 ? 0 : (page.pageNo - 1) * page.pageSize + 1; 34 page.endInfo = page.startInfo + page.pageSize - 1; 35 page.endInfo = page.endInfo >= data.total ? data.total : page.endInfo; 36 page.totalPage = data.pages; 37 page.totalInfo = data.total; 38 page.result = data.list; 39 } 40 // 执行绑定参数的方法 41 bindData(); 42 // 如果总页数 <=1 隐藏下一页 43 if (page.totalPage <= 1) { 44 $("a[aria-label='Next']").hide(); 45 } 46 }); 47 } 48 49 // 设置分页组件的 一些信息 eq:总共多少条 显示第几条~第几条 动态显示页码 50 page.prototype.setValue = function() { 51 $("label.startInfo").text(page.startInfo); // 为此三个元素赋值 52 $("label.endInfo").text(page.endInfo); 53 $("label.totalInfo").text(page.totalInfo); 54 var temp = ""; 55 if (page.totalPage != 0) { // 首先保证总页数不是0页 56 $(".pagination li").removeClass("active"); // 移除掉之前的 当前页面 页码按钮的 57 // 选中状态 58 if (page.totalPage <= 5 59 && $(".pagination li").length != page.totalPage + 2) { // 【初始化总页数小于5页的情况】此处规定下面显示的页数就是5页 如果总页数<5则全部显示》》》$(".pagination li").length !=page.totalPage + 2保证不会重复叠加 60 for (var i = 0; i < page.totalPage - 1; i++) { // 总页数<5，则全部添加 61 temp += $(page.tempLi).find("a").text(i + 2).parent().prop("outerHTML"); // 为tempLi变量中的a标签添加页码数 然后找到a标签的父层 62 // 此时的它是Object类型，需要通过prop("outerHTML")这个属性，获取到HTML代码，这样才能用于追加进页面 【 原生JS DOM里有一个内置属性outerHTML】 63 } 64 page.cleanUp(); 65 $(".pagination li").eq(1).after(temp); // 并将动态生成的页码按钮的HTML代码 66 // 添加到li的第二个之后 67 // 【这里是eq(1)第二个是因为（上一页）这个按钮虽然属性设为隐藏，但是依旧存在；而默认的还有一个第一页这个页码是存在的。所以是两个li，所以是eq(1)】 68 } else { // 否则，是总页数>5的 69 var absCon = Math.abs($(".pagination li").eq(3).text()- page.pageNo); // 先获取eq(3)也就是 中间位置的页码-当前页 70 // 【点击中间页码 靠后的页码按钮的情况】如果当前页>中间位置的页码数 && 中间位置的.length !=0 && 71 // （除了最后一个页码li之外的的最后一个li的文本）也就是倒数第二个的文本!=总页数 【这里的判断条件就是 72 // 如果点击的是中间位置靠后的页码 eq:12345中的4或者5的话】 条件成立 73 if (page.pageNo > $(".pagination li").eq(3).text() 74 && $(".pagination li").eq(3).length != 0 75 && $(".pagination li:not(:last):last").text() != page.totalPage) { 76 absCon = page.totalPage - page.pageNo >= absCon ? absCon 77 : page.totalPage - page.pageNo; // 【当前页就是即将要显示的页码】如果 78 // 总页数-当前页>absCon 79 // 那么就给absCon原本的值，否则就将总页数-当前页的值赋值给absCon 80 for (var i = 0; i < absCon; i++) { // 此处absCon的作用： 81 // 点击中间位置靠后的页码数，可能即将显示的当前页 82 // 是最后一页了，那就不再添加新的页码出来了【eq:总共9页，即将显示的是第9页，那9这个页码之后就不再新增加页码了】 83 // 然后将新增加的页码添加在最后一个li【此处的最后一个li是下一页按钮】之前 84 // ；要添加的内容就是新生成的li的HTML文本 【eval($(".pagination 85 // li").eq($(".pagination li").length - 2).text())+1 86 // 这里使用eval()将其中的内容括起来是为了获取到的值直接和1相加】 87 $(".pagination li").last().before( 88 $(page.tempLi).find("a").text( 89 eval($(".pagination li").eq( 90 $(".pagination li").length - 2) 91 .text()) + 1).parent().prop( 92 "outerHTML")); 93 $(".pagination li").eq(1).remove(); // 并且在循环中始终删除eq(1)也就是前一页按钮之后的第一个页码 94 } 95 } else { // 【初始化 页数大于5页的情况】如果 当前页面上的li【包括上一页，下一页总共7个页码按钮】!=7个 96 // && 当前页面上的li个数 !=总页数+2 【此处的总页数是后台返回的总页数】 97 if ($(".pagination li").length != 7 98 && $(".pagination li").length != page.totalPage + 2) { 99 for (var i = 0; i < 4; i++) { 100 temp += $(page.tempLi).find("a").text(i + 2) 101 .parent().prop("outerHTML"); 102 } 103 $(".pagination li").eq(1).after(temp.toString()); 104 // 【点击 中间页码靠前页码的情况】如果当前页<中间位置的页码 && 上一页按钮之后的页码按钮>=2 105 // 【即点击的中间页码按钮靠前的页码按钮】 106 } else if (page.pageNo < $(".pagination li").eq(3).text() 107 && $(".pagination li").eq(1).text() >= 2) { 108 absCon = page.pageNo - 1 > absCon ? absCon 109 : page.pageNo - 1; 110 for (var i = 0; i < absCon; i++) { 111 $(".pagination li").first().after( 112 $(page.tempLi).find("a").text( 113 eval($(".pagination li").eq(1) 114 .text()) - 1).parent() 115 .prop("outerHTML")); 116 $(".pagination li").eq( 117 $(".pagination li").length - 2).remove(); // 靠后的页码按钮 118 // 【此处-2是将上一页 119 // 下一页两个按钮去掉】 120 } 121 } 122 123 } 124 } 125 126 //删除或者新增信息的时候，页码可能动态变化 127 if($(".pagination li:not(:last):last").text() > page.totalPage) { 128 $(".pagination li:not(:last):last").remove(); 129 if(page.pageNo == page.totalPage) { 130 $("a[aria-label='Next']").hide(); 131 } 132 if($(".pagination li:not(:first):first").text() > 1) { 133 $(".pagination li:first").after($(page.tempLi).find("a").text(parseInt($(".pagination li:not(:first):first").text()) - 1).parent().prop("outerHTML")); 134 } 135 } 136 137 //上一页 下一页 的隐藏与显示 138 if($(".pagination li:not(:last):last").text() > page.pageNo) { 139 $("a[aria-label='Next']").show(); 140 } else { 141 $("a[aria-label='Next']").hide(); 142 } 143 144 if($(".pagination li:not(:first):first").text() < page.pageNo) { 145 $("a[aria-label='Previous']").show(); 146 } else { 147 $("a[aria-label='Previous']").hide(); 148 } 149 150 $(".pagination li:contains(" + page.pageNo + ")") 151 .addClass("active"); // 为 新的 当前页 页码按钮 添加 active选中状态 152 } 153 } 154 155 // 初始化方法 页码的点击事件 上下页点击事件 每页显示多少条的 改变事件 156 page.prototype.init = function() { 157 $("a[aria-label='Previous']").click(function() { 158 $("a[aria-label='Next']").show(); 159 if (page.pageNo == 2) { 160 $("a[aria-label='Previous']").hide(); 161 } else { 162 $("a[aria-label='Previous']").show(); 163 } 164 if (page.pageNo == 1) { 165 return; 166 } 167 page.pageNo--; 168 page.pageSet(bindData, page); 169 }); 170 171 // 绑定 下一页 的点击事件 172 $("a[aria-label='Next']").click(function() { 173 $("a[aria-label='Previous']").show(); 174 if (page.pageNo == page.totalPage - 1) { 175 $("a[aria-label='Next']").hide(); 176 } else { 177 $("a[aria-label='Next']").show(); 178 } 179 page.pageNo++; 180 page.pageSet(bindData, page); 181 }); 182 183 // 上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination 184 // li:gt(0):not(:last)",function(){});的区别在于： 185 // .click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的 186 // 而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件 187 188 // 为动态生成的 页码按钮 添加 点击事件 189 $(document).on("click", ".pagination li:gt(0):not(:last)", function() { 190 page.pageNo = $(this).text(); 191 $("a[aria-label='Previous']").show(); 192 $("a[aria-label='Next']").show(); 193 if (page.pageNo == "1") { 194 $("a[aria-label='Previous']").hide(); 195 } 196 if (page.pageNo == page.totalPage) { 197 $("a[aria-label='Next']").hide(); 198 } 199 200 page.pageSet(bindData, page); 201 }); 202 203 // 为select 选择每页显示多少条 添加改变时间 【但是这不使用change而是使用input 是因为change对IE浏览器不支持】 204 $(".pageInfo").on( 205 "input", 206 function() { 207 page.pageSize = $(this).val(); 208 page.pageNo = 1; 209 $("a[aria-label='Previous']").hide(); 210 $(".pagination li:not(:first):not(:last)").remove(); 211 // $(".pagination li:not(:first), .pagination 212 // li:not(:last)").remove(); 213 $(".pagination li:first").after( 214 "<li class='active'><a href='#'>1</a></li>"); 215 page.pageSet(bindData, page); 216 }); 217 218 } 219 220 /** 221 * 清除页码部分，回到初始化状态 222 */ 223 page.prototype.cleanUp = function() { 224 $("a[aria-label='Previous']").hide(); 225 $("a[aria-label='Next']").show(); 226 $(".pagination li:gt(0):not(:last)").remove(); 227 $(".pagination li:eq(0)").after("<li><a href='#'>1</a></li>"); 228 } 229 230 })();
3》》》本页面的js中 需要提供数据的封装功能 bindDate()方法,【并且注意，任何页面发生变化的地方都需要调用分页的page.pageSet();方法，例如数据的增加，数据的删除，还有page对象初始化，页面初始化的时候就是这几个地方需要调用】
3.1》》》product.js中的page对象初始化也就是在页面初始化的时候+删除操作的时候
1 var indexProductAdd;//定义一个index作为产品添加弹出窗的layer打开返回值 ，用于关闭的时候使用 2 var indexProductUpdate; //定义一个index作为添加产品的弹出框的返回值 3 var product; 4 var page; 5 var bindData; 6 7 $(document).ready( function () { 8 9 /** 10 * 查询类型 【eq:产品:product 疾病:disease 基因：gene 】 11 */ 12 var queryType; 13 14 /** 15 * 添加产品 页面 16 */ 17 18 $(".btn-primary").click( function(){ 19 indexProductAdd = layer.open({ 20 type: 2, 21 title: "添加产品", 22 content: 'productadd.htmls', 23 area: ['500px', '580px'] 24 }); 25 }); 26 27 /** 28 * updateproduct.htmls 更新 产品信息 29 */ 30 $(document).on("click",".table-bordered tbody tr a[class='up']",function(){ 31 product = $.parseJSON( $(this).parents('tr').find("input").eq(1).val()); 32 $(this).parents('tr').find("input[type='checkbox']").prop("checked",true);//在点击更新按钮之后，勾选本行对应的checkbox 33 indexProductUpdate = layer.open({ 34 type: 2, 35 title: "修改产品", 36 content: 'updateproduct.htmls', 37 area: ['500px', '580px'], 38 end : function(){ 39 $(".table-bordered tbody :checked").attr("checked",false); 40 } 41 }); 42 }); 43 44 45 46 47 48 /** 49 * 封装数据 的方法 在本页面的js中， 50 */ 51 bindData = function bindData(){ 52 var result = page.result; 53 $(".table-bordered tbody").empty(); 54 if(result != "" && result != null && result != undefined) { 55 var temp = ""; 56 $.each(result, function(index, item) { 57 //JSON.stringify(item) 对象转化字符串 58 temp += "<tr class='text-c'><td><input type='checkbox' value='"+item.productId+"'><input type='hidden' value='"+JSON.stringify(item)+"'/></td><td>"+item.productName+"</td><td><a href='disease.htmls?productId="+item.productId+"' class='check'>【查看疾病信息】</a><a href='JavaScript:void(0)' class='up'>【更新】</a></td></tr>"; 59 }); 60 $(".table-bordered tbody").append(temp); 61 } 62 page.setValue(); 63 } 64 65 /** 66 * 实例化一个分页组件的 对象 67 */ 68 page = new page("queryAllProduct2.htmls", bindData); 69 page.pageSet(); 70 71 72 73 /** 74 * 批量删除 75 */ 76 $(".btn-danger").click(function(){ 77 var productId = []; 78 $(".table-bordered tbody :checked").each(function(index,item){ //注意:checked前面需要空格 79 productId.push(item.value); //数组中添加数据 需要push() 80 }); 81 82 if(productId.length == 0){ 83 layer.msg('请选择至少一条记录！', { 84 icon: 3, 85 time: 2000 //2秒关闭（如果不配置，默认是3秒） 86 }, function(){ 87 //do something 88 }); 89 return; 90 }else{ 91 $.post("productDelete.htmls?productId="+productId, function(data){ 92 if(data){ 93 layer.msg('删除成功！', { 94 icon: 1, 95 time: 2000 //2秒关闭（如果不配置，默认是3秒） 96 }, function(){ 97 //do something 98 }); 99 100 // page.cleanUp(); 101 if($(".table-bordered tbody :checked").length == $(".table-bordered tbody tr").length && page.pageNo>1){//若本页全部删除 102 page.pageNo--; 103 } 104 page.pageSet(); 105 }else{ 106 layer.msg('删除失败！', { 107 icon: 2, 108 time: 2000 //2秒关闭（如果不配置，默认是3秒） 109 }, function(){ 110 //do something 111 }); 112 } 113 $(".table-hover thead :checked").attr("checked",false); 114 return; 115 }); 116 } 117 }); 118 119 120 121 122 123 124 } );
3.2》》》productAdd.js中添加一条数据完成后
1 $(document).ready( function () { 2 3 //为添加产品的表单加验证效果 4 $('#form-product-add').bootstrapValidator(); 5 //$('#form-product-add').data('bootstrapValidator').validate(); //提交按钮是sumbit 6 //$('#form-product-add').data('bootstrapValidator').isValid(); //提交按钮是button 7 /** 8 * 添加产品的按钮 9 */ 10 $("#pAdd").click(function(){ 11 $('#form-product-add').bootstrapValidator('validate');//为表单的添加按钮 添加一个绑定表单的方法 12 var productName = $("input[name='productName']").val(); 13 var productCre = $("textarea[name='productCre']").val(); 14 var temp; 15 if(productName !="" ){ 16 $.ajax({url:"productAdd.htmls", 17 type:"post", 18 data:{ 19 "productName" : productName, 20 "productCre" : productCre 21 }, 22 success:function(data){ 23 24 if(data != null){ 25 parent.page.pageSet(); 26 } 27 // var index = parent.layer.getFrameIndex(window.name); 可以用这个获取当前要关闭的layer ,也可以使用parent.indexProductAdd 获取在父层定义的那个layer。open()的弹窗 28 parent.layer.close(parent.indexProductAdd); //获取到layer的弹出窗 关闭它 29 }}); 30 31 } 32 return false;//页面的表达提交使用submit，然后又对这个提交按钮绑定一个点击事件，使用ajax来和后台进行交互，这个时候如果不return false；会导致ajax提交一次，submit提交一次，这样的错误不容易找出来，会表现出来：ajax执行成功但是时而会进回调函数，时而不会进入回调函数， 33 }); 34 35 /** 36 * 全选按钮的 全选功能 37 */ 38 $('table th input:checkbox').on('click' , function(){ 39 var that = this; 40 $(this).closest('table').find('tr > td:first-child input:checkbox') 41 .each(function(){ 42 this.checked = that.checked; 43 $(this).closest('tr').toggleClass('selected'); 44 }); 45 }); 46 } );
4》》》controller服务器中的处理方法
@Controller
@RequestMapping("geneInfo")
public class GeneInfoController {
1 /** 2 * 分页查询---查询所有产品 3 * @param model 4 * @return 5 */ 6 @RequestMapping("/queryAllProduct2") 7 @ResponseBody 8 public PageInfo<Product> queryAllProduct2(ModelMap model, int pageNo, int pageSize){ 9 Criteria criteria = getCurrentSession().createCriteria(Product.class); 10 return productService.findQuery(criteria ,pageNo , pageSize ); 11 } 12
5》》》Dao的实现层 的分页实现
1 @Override 2 public PageInfo<T> findQuery(Criteria criteria, int pageNo, int pageSize) { 3 try { 4 Assert.isTrue(pageNo >= 1, "pageNO should start from 1"); 5 //拆分order by子句 6 Field field = CriteriaImpl.class.getDeclaredField("orderEntries"); 7 field.setAccessible(true); 8 List<?> orderEntrys = (List<?>) field.get(criteria); 9 field.set(criteria, new ArrayList()); 10 //统计总数 11 long totalCount = countAll(criteria); 12 criteria.setProjection(null); 13 //统计完了再把order by子句加上 这样保证了sql语句不会出错 14 field.set(criteria, orderEntrys); 15 List<T> list = findPage(criteria, pageNo, pageSize); 16 if (totalCount < 1) { 17 return new PageInfo<T>(); 18 } 19 PageInfo<T> page = new PageInfo<T>(); 20 page.setPageNum(pageNo); 21 page.setTotal(totalCount); 22 page.setPages((int) (totalCount / pageSize == 0 ? totalCount / pageSize : totalCount / pageSize + 1)); 23 page.setPageSize(pageSize); 24 page.setList(list); 25 return page; 26 } catch (Exception e) { 27 // TODO: handle exception 28 throw new QueryException("查询出错！"); 29 } 30 31 }
其中主要的思想 就是 将分页组件 分离出来，仅作分页处理。而数据的封装则是在不同的页面进行不同的封装实现。然后封装数据的方法作为参数传递给分页对象。