【jQuery 分页】jQuery分页功能的实现-阿里云开发者社区

自写的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">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 基因信息管理 <span class="c-gray en">&gt;</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">&#xe68f;</i></a></nav>
 34 
 35 <div class="pd-20">
 36   <div class="text-c"> 
 37     <select class="select" id="" name="" style="width: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">&#xe665;</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">&#xe6e2;</i> 批量删除</a> 
 47         <a class="btn btn-primary radius"  href="javascript:;"><i class="Hui-iconfont">&#xe600;</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="width: 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">&laquo;</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">&raquo;</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>

View Code

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 })();

View Code

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

View Code

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

View Code

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

View Code

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     }