SSM 通用分页 ，PageHelper后台插件 + bootstrap前端布局
1、后台代码
需要引入相应jar包，以及先实现service层的操作，返回Msg为工具包，在本文最后会贴出源码。
@ResponseBody//点击分页查询考生数据(分页查询 json格式)
@RequestMapping("/empsJson")
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn) {
//使用PageHelper分页插件
//查询之前只需要调用，传入页码，以及每页条数
PageHelper.startPage(pn,10);
//startPage后面紧跟的一个查询就是一个分页查询
ArrayList<Emploree> emps = emploreeService.getAll();
//使用pageInfo包装查询出来的结果,只需要把pageInfo交给页面
//其中封装详细的分页信息
PageInfo<Emploree> page = new PageInfo<Emploree>(emps,8);//连续显示的页数
return Msg.success().add("pageInfo", page);
}2、前端页面所需js
需要引入封装好的通用分页 pagingJS.js 文件，另外还需要自定义一个定制化表格js文件，如下模板
var path = '';//项目路径
//获取路径
getPath();
//ajax请求,获取相应分页数据
function to_page(pn){
$("#check_all").prop("checked",false);
$.ajax({
url:path+"paging",
data:{
"pn":pn,
"type":1
},
type:"get",
success:function(result){
console.log(result);
//1.解析并显示员工数据
build_emps_table(result);
//2.解析并显示分页信息
build_page_info(result);
//3.解析并显示分页条
build_page_nav(result);
}
});
}
/***************************************** 定制化 ************************************************/
//解析每条员工数据
function build_emps_table(result){
//初始化清空数据
$("#paging_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.each(emps,function(index,item){
var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
var empIdTd = $("<td></td>").append(item.id);
var empNameTd = $("<td></td>").append(item.name);
var empSexTd = $("<td></td>").append(item.sex== 0 ?"男":"女");
var empDeptTd = $("<td></td>").append(item.dept);
var empIdcardTd = $("<td></td>").append(item.idcard);
var empLicenseTd = $("<td></td>").append(item.license);
var empPhotoTd = $("<td></td>").append(item.photo);
var editSpan = $("<span></span>").addClass("glyphicon glyphicon-pencil").css("font-size","9px");
//为编辑按钮添加一个自定义属性，用来存放员工id
var editBtn = $("<button></button>").addClass("btn btn-primary btn-xs edit_btn")
.append(editSpan)
.append("编辑");
//为编辑按钮添加一个自定义属性，用来存放员工id
editBtn.attr("edit_id",item.id);
var delSpan = $("<span></span>").addClass("glyphicon glyphicon-trash").css("font-size","9px");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-xs delete_btn")
.append(delSpan)
.append("删除");
//为删除按钮添加一个自定义属性，用来存放员工id
delBtn.attr("delete_id",item.id);
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
$("<tr></tr>").append(checkBoxTd)
.append(empIdTd)
.append(empNameTd)
.append(empSexTd)
.append(empDeptTd)
.append(empIdcardTd)
.append(empLicenseTd)
.append(empPhotoTd)
.append(btnTd)
.appendTo("#paging_table tbody");
});
}
3、前端页面布局
注意：<table>标签一点要加 否则分页功能不生效
<!-- 表格 -->
<div class="row" >
<table class="table table-striped table-bordered table-hover" >
<thead>
<tr><!-- 姓名、性别、所在单位（航空公司）、身份证号码、执照号码 -->
<th width="20px">
<input type="checkbox" ></th>
<th>考生ID</th>
<th>姓名</th>
<th>性别</th>
<th>所在单位</th>
<th>身份证号</th>
<th>执照号码</th>
<th>照片</th>
<th>操作</th></tr>
</thead>
<tbody>
<c:forEach items="${pageInfo.getList() }" var="item">
<tr>
<td>
<input type="checkbox" class="check_item">
</td>
<td>${item.id }</td>
<td>${item.name }</td>
<td>
<c:choose>
<c:when test="${item.sex==0 }">男</c:when>
<c:otherwise>女</c:otherwise>
</c:choose>
</td>
<td>${item.dept }</td>
<td>${item.idcard }</td>
<td>${item.license }</td>
<td>${item.photo }</td>
<td class="center">
<button class="btn btn-primary btn-xs edit_btn" edit_>
<span class="glyphicon glyphicon-pencil" ></span>编辑
</button>
<button class="btn btn-danger btn-xs delete_btn" delete_>
<span class="glyphicon glyphicon-trash" ></span>删除
</button>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!-- ****************************** 以下为通用分页模块，无需改动 ************************************* -->
<div class="row">
<div class="col-md-4" >
当前${pageInfo.getPageNum() }页,总${pageInfo.getPages() }页,总共${pageInfo.getTotal() }条记录
</div>
<div class="col-md-8 text-right">
<nav aria-label="Page navigation">
<ul class="pagination" >
<li class="disabled" jumpPageNum="1"><a href="javascript:;">首页</a></li>
<li class="disabled" jumpPageNum="1">
<a href="javascript:;"><span>«</span></a>
</li>
<c:forEach items="${pageInfo.getNavigatepageNums() }" var="item">
<li <c:if test="${item == 1 }"> class="active"</c:if> jumpPageNum="${item }">
<a href="javascript:;">${item }</a>
</li>
</c:forEach>
<li jumpPageNum="${pageInfo.getPageNum()+1 }">
<a href="javascript:;"><span>»</span></a>
</li>
<li jumpPageNum="${pageInfo.getPages() }"><a href="javascript:;">末页</a></li>
</ul>
</nav>
</div>
</div>
4、相关文件源码
pagingJS.js
//总记录数 var totalRecord; //当前页 var currentPage; function getPath(){ var urlinfo=window.location.href; //获取当前页面的url var offset1=urlinfo.split("/",4); path = ''; offset1.forEach( function(e) { path = path + e +"/"; }); console.log(path); } //页面加载完成后，发送ajax请求，拿到分页数据 //to_page(1); //解析分页信息 function build_page_info(result){ //初始化清空数据 $("#show_page_info").empty(); $("#show_page_info").append("当前"+result.extend.pageInfo.pageNum+"页,总"+result.extend.pageInfo.pages+"页,总共"+result.extend.pageInfo.total+"条记录"); totalRecord = result.extend.pageInfo.total; currentPage = result.extend.pageInfo.pageNum; } //解析分页条信息 function build_page_nav(result){ //初始化清空数据 $("#show_page_nav").empty(); var ul = $("<ul></ul>").addClass("pagination"); var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","javascript:;")); var prePageLi = $("<li></li>").append($("<a></a>").append("«").attr("href","javascript:;")); var nextPageLi = $("<li></li>").append($("<a></a>").append("»").attr("href","javascript:;")); var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","javascript:;")); //判断首页和上一页、下一页和末页是否可操作 if(result.extend.pageInfo.hasPreviousPage == false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); } else{ //为首页和上一页、下一页和末页添加点击翻页事件 firstPageLi.click(function(){ to_page(1); }); prePageLi.click(function(){ to_page(result.extend.pageInfo.pageNum - 1); }); } if(result.extend.pageInfo.hasNextPage == false){ nextPageLi.addClass("disabled"); lastPageLi.addClass("disabled"); } else{ nextPageLi.click(function(){ to_page(result.extend.pageInfo.pageNum + 1); }); lastPageLi.click(function(){ to_page(result.extend.pageInfo.pages); }); } //添加首页和上一页 ul.append(firstPageLi).append(prePageLi); //遍历添加页码 $.each(result.extend.pageInfo.navigatepageNums,function(index,item){ var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","javascript:;")); if(result.extend.pageInfo.pageNum == item){ numLi.addClass("active"); } numLi.click(function(){ to_page(item); }); ul.append(numLi); }); //添加下一页和末页 ul.append(nextPageLi).append(lastPageLi); //把ul添加到nav var nav = $("<nav></nav>").append(ul); nav.appendTo("#show_page_nav"); } //点击页码，局部刷新 $(document).on("click","#pagination li",function(){ to_page($(this).attr("jumpPageNum")); }); //完成全选/全不选功能 $("#check_all").click(function(){ //attr获取checked是undefined //dom的原生用prop修改并获取，attr获取自定义属性 $(".check_item").prop("checked",$(this).prop("checked")); }); //check_item选择功能 $(document).on("click",".check_item",function(){ //判断当前是否选中10个 var flag = $(".check_item:checked").length == $(".check_item").length; $("#check_all").prop("checked",flag); }); //查询为空，显示提示 function noDataShow (dom) { var Dom = dom $("<h1></h1>").addClass('text-center').prop("id","showData") .css('marginTop', '60px') .text("暂无符合条件的查询结果") .appendTo(Dom); }
Msg.java
import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; /** * 通用返回类 * @Description: TODO * @author 王成 * @date 2018年6月15日上午11:21:20 */ @Data @NoArgsConstructor @AllArgsConstructor public class Msg { //状态码 200-成功 500-失败 private int code; //提示信息 private String msg; //用户要返回给浏览器的数据 private Map<String, Object> extend = new HashMap<String, Object>(); public static Msg success() { Msg result = new Msg(); result.setCode(200); result.setMsg("处理成功！"); return result; } public static Msg fail() { Msg result = new Msg(); result.setCode(500); result.setMsg("处理失败！"); return result; } public Msg add(String key,Object value) { this.getExtend().put(key, value); return this; } }
- 上一篇 »PHP通用分页类
- 下一篇 »javascript笔记——前端实现分页和查询
