自写的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="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">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 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>5option> 58 <option selected="selected">10option> 59 <option>20option> 60 <option>50option> 61 <option>100option> 62 select> 63 <label class="pageInfo">条label> 64 div> 65 66 67 <div class="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 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="#">1a>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 = "
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 += ""; 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 } ); "+item.productName+" 【查看疾病信息】【更新】
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 PageInfoqueryAllProduct2(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 PageInfofindQuery(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 list = findPage(criteria, pageNo, pageSize); 16 if (totalCount < 1) { 17 return new PageInfo (); 18 } 19 PageInfo page = new PageInfo (); 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 }
其中主要的思想 就是 将分页组件 分离出来，仅作分页处理。而数据的封装则是在不同的页面进行不同的封装实现。然后封装数据的方法作为参数传递给分页对象。