jquery pagination 实现jsp页面分页效果
这里分享使用插件和不使用插件的方法，只有jsp和js代码不同，controller和service，dao，mapper的代码都一样（不使用插件有一点缺陷，就是页数太多的时候页面宽度显示问题）
1.引入jquery.pagination.js和pagination.css
2.1不使用插件的jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/jsp/common/common_taglib.jsp"%> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <%@ include file="/WEB-INF/jsp/common/common_css.jsp"%> <style> .tree li { list-style-type: none; cursor:pointer; } table tbody tr:nth-child(odd){background:#F4F4F4;} table tbody td:nth-child(even){color:#C00;} </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" advert="navigation"> <div class="container-fluid"> <div class="navbar-header"> <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 广告管理</a></div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <%@include file="/WEB-INF/jsp/common/top.jsp" %> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <div class="tree"> <jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include> </div> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3> </div> <div class="panel-body"> <form class="form-inline" advert="form" style="float:left;"> <div class="form-group has-feedback"> <div class="input-group"> <div class="input-group-addon">查询条件</div> <input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件"> </div> </div> <button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button> </form> <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button> <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${CWF_PATH}/advert/toAdd.htm'"><i class="glyphicon glyphicon-plus"></i> 新增</button> <br> <hr style="clear:both;"> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr > <th width="30">#</th> <th width="30"><input id="allCheckBox" type="checkbox"></th> <th>广告描述</th> <th>状态</th> <th width="100">操作</th> </tr> </thead> <tbody id="tbodyConcat"> </tbody> <tfoot> <tr > <td colspan="5" align="center"> <ul class="pagination"> 分页的数据显示在这里 </ul> </td> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </div> <%@ include file="/WEB-INF/jsp/common/common_js.jsp"%> <script type="text/javascript"> $(function () { $(".list-group-item").click(function(){ if ( $(this).find("ul") ) { $(this).toggleClass("tree-closed"); if ( $(this).hasClass("tree-closed") ) { $("ul", this).hide("fast"); } else { $("ul", this).show("fast"); } } }); queryPageList(1); showMenu(); }); $("tbody .btn-success").click(function(){ window.location.href = "assignadvert.html"; }); $("tbody .btn-primary").click(function(){ window.location.href = "edit.html"; }); function pageChange(pageNo){ queryPageList(pageNo); } var loadingIndex = -1;
//分页查询 function queryPageList(pageNo){ var queryText = $("#queryText").val(); var jsonData = {"pageNo":pageNo, "pageSize":10, "queryText":queryText} $.ajax({ type:"POST", data:jsonData, url:"${CWF_PATH}/advert/doIndex.do", beforeSend : function(){ loadingIndex = layer.load(2,{time:10*1000}); return true; },success:function(data){ layer.close(loadingIndex); if(data.success){ var page = data.page; var pageData = data.page.pageList; var html =""; $.each(pageData,function (i,n){ html += '<tr>'; html += ' <td>'+(i+1)+'</td>'; html += ' <td><input type="checkbox" id="'+n.id+'" name="'+n.name+'"></td>'; html += ' <td>'+n.name +'</td>'; html += ' <td>'+n.status +'</td>'; html += ' <td>'; html += ' <button type="button" class="btn btn-success btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toAssignPermission.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-check"></i></button>'; html += ' <button type="button" class="btn btn-primary btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toUpdate.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-pencil"></i></button>'; html += ' <button type="button" class="btn btn-danger btn-xs" onclick="deleteUser('+n.id+',\''+n.name+'\')"><i class=" glyphicon glyphicon-remove"></i></button>'; html += ' </td>'; html += '</tr>'; }); $("#tbodyConcat").html(html);
//分页页码处理 var content =""; if(page.pageNo == 1){ content += '<li class="disabled"><a href="#">上一页</a></li>'; }else{ content += '<li><a href="#" onclick="pageChange('+(page.pageNo-1)+')">上一页</a></li>'; } for(var i = 1;i<=page.totalPage;i++){ content +='<li><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>'; } if(page.pageNo == page.totalPage){ content += '<li class="disabled"><a href="#">下一页</a></li>'; }else{ content += '<li><a href="#" onclick="pageChange(('+(page.pageNo+1)+'))">下一页</a></li>'; } $(".pagination").html(content); }else{ layer.msg(data.message, {time:1000, icon:6, shift:6}); } },error:function(){ layer.msg("加载数据失败！", {time:1000, icon:6, shift:6}); } }); } $("#queryBtn").click(function (){ queryPageList(1) }); function deleteUser(id,name){ layer.confirm("确认要删除"+name+"吗",{icon:3,title:"提示"},function(confirmIndex){ layer.close(confirmIndex); $.ajax({ type:"POST", data:{"id":id}, url:"${CWF_PATH}/advert/delete.do", beforeSend:function(){ return true; },success:function(data){ if(data.success){ window.location.href="${CWF_PATH}/advert/index.htm"; }else{ layer.msg(data.message, {time:1000, icon:6, shift:6}); } },errot:function(){ layer.msg("删除数据失败！", {time:1000, icon:6, shift:6}); } }); },function(confirmIndex){ layer.close(confirmIndex); } ); } $("#allCheckBox").click(function(){ var checkBoxStatus = this.checked; $("#tbodyConcat input[type='checkbox']").prop("checked",checkBoxStatus); }); $('#tbodyConcat').on('change',"input[type='checkbox']",function(e){ var selectedCheckBox = $("#tbodyConcat input[type='checkbox']"); var isAllCehcked = true; $.each(selectedCheckBox,function(){ if(!this.checked){ $("#allCheckBox").prop("checked",false); isAllCehcked = false; return false; } }); $("#allCheckBox").prop("checked",isAllCehcked); }); </script> </body> </html>
2.2使用插件的jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/jsp/common/common_taglib.jsp"%> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <%@ include file="/WEB-INF/jsp/common/common_css.jsp"%> <style> .tree li { list-style-type: none; cursor:pointer; } table tbody tr:nth-child(odd){background:#F4F4F4;} table tbody td:nth-child(even){color:#C00;} </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" advert="navigation"> <div class="container-fluid"> <div class="navbar-header"> <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 广告管理</a></div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <%@include file="/WEB-INF/jsp/common/top.jsp" %> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <div class="tree"> <jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include> </div> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3> </div> <div class="panel-body"> <form class="form-inline" advert="form" style="float:left;"> <div class="form-group has-feedback"> <div class="input-group"> <div class="input-group-addon">查询条件</div> <input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件"> </div> </div> <button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button> </form> <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button> <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${CWF_PATH}/advert/toAdd.htm'"><i class="glyphicon glyphicon-plus"></i> 新增</button> <br> <hr style="clear:both;"> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr > <th width="30">#</th> <th width="30"><input id="allCheckBox" type="checkbox"></th> <th>广告描述</th> <th>状态</th> <th width="100">操作</th> </tr> </thead> <tbody id="tbodyConcat"> </tbody> <tfoot> <tr > <td colspan="5" align="center"> <!-- <ul class="pagination"> </ul> --> <div id="Pagination" class="pagination">分页数据显示到这里</div> </td> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </div> <%@ include file="/WEB-INF/jsp/common/common_js.jsp"%> <script type="text/javascript"> $(function () { $(".list-group-item").click(function(){ if ( $(this).find("ul") ) { $(this).toggleClass("tree-closed"); if ( $(this).hasClass("tree-closed") ) { $("ul", this).hide("fast"); } else { $("ul", this).show("fast"); } } }); queryPageList(0);//插件0表示第一页 showMenu(); }); $("tbody .btn-success").click(function(){ window.location.href = "assignadvert.html"; }); $("tbody .btn-primary").click(function(){ window.location.href = "edit.html"; }); var loadingIndex = -1; function queryPageList(pageNo){ var queryText = $("#queryText").val(); var jsonData = {"pageNo":(pageNo+1),//插件0表示第一页，但是后台查询还是从1开始 "pageSize":10, "queryText":queryText} $.ajax({ type:"POST", data:jsonData, url:"${CWF_PATH}/advert/doIndex.do", beforeSend : function(){ loadingIndex = layer.load(2,{time:10*1000}); return true; },success:function(data){ layer.close(loadingIndex); if(data.success){ var page = data.page; var pageData = data.page.pageList; var html =""; $.each(pageData,function (i,n){ html += '<tr>'; html += ' <td>'+(i+1)+'</td>'; html += ' <td><input type="checkbox" id="'+n.id+'" name="'+n.name+'"></td>'; html += ' <td>'+n.name +'</td>'; html += ' <td>'+n.status +'</td>'; html += ' <td>'; html += ' <button type="button" class="btn btn-success btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toAssignPermission.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-check"></i></button>'; html += ' <button type="button" class="btn btn-primary btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toUpdate.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-pencil"></i></button>'; html += ' <button type="button" class="btn btn-danger btn-xs" onclick="deleteUser('+n.id+',\''+n.name+'\')"><i class=" glyphicon glyphicon-remove"></i></button>'; html += ' </td>'; html += '</tr>'; }); $("#tbodyConcat").html(html); // 创建分页，page.totalSize表示分页数据的总条数（比如返回97条数据，10条一页，按每页10条数据表示，一共有10页），totalsize就是97 $("#Pagination").pagination(page.totalSize, { num_edge_entries: 1, //边缘页数 num_display_entries: 4, //主体页数 callback: queryPageList, items_per_page:10, //每页显示1项 current_page:(page.pageNo-1), prev_text:"上一页", next_text:"下一页" }); /* var content =""; if(page.pageNo == 1){ content += '<li class="disabled"><a href="#">上一页</a></li>'; }else{ content += '<li><a href="#" onclick="pageChange('+(page.pageNo-1)+')">上一页</a></li>'; } for(var i = 1;i<=page.totalPage;i++){ content +='<li><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>'; } if(page.pageNo == page.totalPage){ content += '<li class="disabled"><a href="#">下一页</a></li>'; }else{ content += '<li><a href="#" onclick="pageChange(('+(page.pageNo+1)+'))">下一页</a></li>'; } $(".pagination").html(content); */ }else{ layer.msg(data.message, {time:1000, icon:6, shift:6}); } },error:function(){ layer.msg("加载数据失败！", {time:1000, icon:6, shift:6}); } }); } $("#queryBtn").click(function (){ queryPageList(0) }); function deleteUser(id,name){ layer.confirm("确认要删除"+name+"吗",{icon:3,title:"提示"},function(confirmIndex){ layer.close(confirmIndex); $.ajax({ type:"POST", data:{"id":id}, url:"${CWF_PATH}/advert/delete.do", beforeSend:function(){ return true; },success:function(data){ if(data.success){ window.location.href="${CWF_PATH}/advert/index.htm"; }else{ layer.msg(data.message, {time:1000, icon:6, shift:6}); } },errot:function(){ layer.msg("删除数据失败！", {time:1000, icon:6, shift:6}); } }); },function(confirmIndex){ layer.close(confirmIndex); } ); } $("#allCheckBox").click(function(){ var checkBoxStatus = this.checked; $("#tbodyConcat input[type='checkbox']").prop("checked",checkBoxStatus); }); $('#tbodyConcat').on('change',"input[type='checkbox']",function(e){ var selectedCheckBox = $("#tbodyConcat input[type='checkbox']"); var isAllCehcked = true; $.each(selectedCheckBox,function(){ if(!this.checked){ $("#allCheckBox").prop("checked",false); isAllCehcked = false; return false; } }); $("#allCheckBox").prop("checked",isAllCehcked); }); </script> </body> </html>
3.Page类
package com.stuwork.crowdfunding.util; import java.util.List; public class Page { private Integer pageNo;//当前页数 private Integer pageSize;//每页显示数 private Integer totalPage;//总页数 private Integer totalSize;//总记录数 private List pageList; public Page(Integer pageNo,Integer pageSize){ if(pageNo <=0){ pageNo = 1; }else{ this.pageNo = pageNo; } if(pageSize <= 0){ pageSize = 10; }else{ this.pageSize = pageSize; } } public Integer getPageNo() { return pageNo; } public void setPageNo(Integer pageNo) { this.pageNo = pageNo; } public Integer getPageSize() { return pageSize; } public void setPageSize(Integer pageSize) { this.pageSize = pageSize; } public Integer getTotalPage() { return totalPage; } private void setTotalPage(Integer totalPage) { this.totalPage = totalPage; } public Integer getTotalSize() { return totalSize; } public void setTotalSize(Integer totalSize) { this.totalSize = totalSize; this.totalPage = (totalSize%pageSize)==0?(totalSize/pageSize):(totalSize/pageSize+1); } public List getPageList() { return pageList; } public void setPageList(List pageList) { this.pageList = pageList; } //数据库查询开始索引 public Integer getStartIndex(){ return (this.pageNo - 1)*pageSize; } }
4.controller的方法
//分页同步请求（参数改为map接受，json封装）条件查询 @ResponseBody @RequestMapping("/doIndex") public Object index(@RequestParam(value="pageNo",required=false,defaultValue="1") Integer pageNo, @RequestParam(value="pageSize",required=false,defaultValue="10")Integer pageSize, String queryText){ AjaxResult result = new AjaxResult(); try { Map<String,Object> map = new HashMap<String,Object>(); map.put("pageNo", pageNo); map.put("pageSize", pageSize); if(StringUtil.isNotEmpty(queryText)){ if(queryText.equals("%")){ //斜线本身需要转译,regex中两个\\表示一个\ ; Java中也是两个\\表示一个\;所以,需要四个斜线 queryText = queryText.replaceAll("%", "\\\\%"); } map.put("queryText", queryText); } Page page = advertService.getPage(map); result.setSuccess(true); result.setPage(page); } catch (Exception e) { result.setSuccess(false); result.setMessage("查询数据失败"); e.printStackTrace(); } return result; }
5.service方法
public Page getPage(Map<String, Object> map) { //通过当前页，和每页显示的条数，取得mysql的查询索引startIndex Page page = new Page((Integer) map.get("pageNo"), (Integer) map.get("pageSize")); Integer startIndex = page.getStartIndex(); map.put("startIndex", startIndex); List<Advertisement> pageList = advertisementMapper.queryList(map); //取得分页的总记录数据 Integer totalSize = advertisementMapper.queryCount(map); page.setPageList(pageList); page.setTotalSize(totalSize); return page; }
6.mapper方法
<select id="queryList" parameterType="map" resultMap="BaseResultMap"> SELECT id, name, iconpath, status, url, userid FROM t_advertisement <where> <if test="queryText != null"> name like concat("%",#{queryText},"%") </if> </where> ORDER BY id DESC LIMIT #{startIndex}, #{pageSize} </select>
