springmvc + jquery + pager分页实例

最新推荐文章于 2019-06-07 17:45:42 发布

z_alvin

最新推荐文章于 2019-06-07 17:45:42 发布

阅读量1.1k

点赞数

分类专栏： springmvc + 分页文章标签： jquery spring mvc 分页

本文链接：https://blog.csdn.net/z_alvin/article/details/53141695

版权

springmvc + 分页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

总体逻辑：

1、前台需传给后台2个参数：当前页数（page）、每页显示的记录数（pageSize）；

2、后台根据 ---当前页数（page）、每页显示的记录数（pageSize）---去数据库查询；

3、后台返回给前台参数：数据库中的总的记录数（count）、以及分页查询到的详细记录（list）

（一）。pager.js文件

/**
*
*/

Pager=function(){};
Pager.draw = function(ul,page,total,button) {
var html = "";
button=button || 3;
page=page || 1;
total=total || 1;
html += "<li" + (page == 1 ? " class=\"disabled\"" : "") + "><a href=\"javascript:$.toPage(1)\">首页</a></li>";
html += "<li" + (page == 1 ? " class=\"disabled\"" : "") + "><a "+(page == 1 ? " href=\"javascript:;\"" : " href=\"javascript:$.toPage(" + (page - 1) + ")\"")+" aria-label=\"Previous\"><span aria-hidden=\"true\">上一页</span></a></li>";

html+=page - button>1 ? "<li><a href=\"javascript:;\">...</a></li>" : "";
for(var i = (page - button > 1 ? page - button : 1); i <= (page + button < total ? page + button : total); i++) {
html += "<li" + (page == i ? " class=\"active\"" : "") + "><a href=\"javascript:$.toPage(" + i + ")\">" + i + "</a></li>";
}
html+=page + button < total ? "<li><a href=\"javascript:;\">...</a></li>" : "";

html += "<li" + (page == total ? " class=\"disabled\"" : "") + "><a "+(page == total ? " href=\"javascript:;\"" : " href=\"javascript:$.toPage(" + (page + 1) + ")\"")+" aria-label=\"Next\"><span aria-hidden=\"true\">下一页</span></a></li>";
html += "<li" + (page == total ? " class=\"disabled\"" : "") + "><a href=\"javascript:$.toPage(" + total + ")\">末页</a></li>";

ul.html(html);
}

（二）、页面

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<html>
<head>
<meta charset="UTF-8">
<title>分页实例</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="<%=basePath%>/resources/backend/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=basePath%>/resources/backend/css/common.css">
<link rel="stylesheet" href="<%=basePath%>/resources/backend/css/bootstrap-datetimepicker.min.css">
</head>
<body class="bgcolor">
<div class="containter col-xs-12" style="margin-top:15px;">
<div class="list-head">
<h2 class="pull-left">注册列表</h2>
</div>
<div class="list-cont">
<div>
<table class="table date-table">
<thead>
<tr>
<th class="tcenter" width="25%">序号</th>
<th class="tcenter" width="25%">用户名</th>
<th class="tcenter" width="25%">手机号码</th>
<th class="tcenter" width="25%">身份证号码</th>
</tr>
</thead>
<tbody id="j-latestList"></tbody>
</table>
</div>
<div class="page-cont">
<ul class="pagination"></ul>
</div>
</div>
</div>
<script type="text/javascript" src="<%=basePath%>/resources/backend/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/backend/js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/backend/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/backend/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/backend/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/backend/js/pager.js"></script>
<script type="text/javascript">
$.toPage=function(page){
var request=new urlSearch();
var pageSize=3;
var data={"header":{},"content":{"page":page,"pageSize":pageSize}}
$.ajax({
type: "post",
url: "/patient/QueryUsersByExam.do",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
dataType: "json",
async: false,
success: function (data) {
var count = data.content.sum; // 总长度--33
var data = data.content.patientList;

var contentHtml="";
if(data.length=="0"){
contentHtml+='<tr><td colspan="4" class="tcenter">暂时没有数据</td></tr>';
$("#j-latestList").html(contentHtml);
}else{
for(var i = 0 ; i < data.length; i++){
contentHtml+='<tr><td class="tcenter">'+(parseInt(i)+1)+'</td><td class="tcenter">'+data[i].patientName+'</td>';
contentHtml+='<td class="tcenter">'+data[i].phoneNum+'</td>';
contentHtml+='<td>'+data[i].patientIdCard+'</td>'+ '</tr>';
}

$("#j-latestList").html(contentHtml);

var total;

parseInt(count) % parseInt(pageSize) == 0 ? total = parseInt(count) / parseInt(pageSize) : total = parseInt(parseInt(count) / parseInt(pageSize)) + 1;

Pager.draw($(".pagination"), page, total);
}

}
});
}
$.toPage(1);
</script>
</body>
</html>

（三）、后台代码

@RequestMapping(value = "/getPatientList")
public @ResponseBody ResponseEntity getPatient(@RequestBody RequestEntity requestBody) {
ReturnCode returnCode = ReturnCode.OK;
ResponseEntity responseEntity = null;
List<FamilyCardBean> patientList = null;
List<FamilyCardBean> allPatientList = null;
Map<String, Object> resultParam = new HashMap<String, Object>();
int sum = 0;
try {
// 获取登录用户信息
Map<String, Object> param = requestBody.getContent();
int page = Integer.parseInt(param.get("page").toString());
int pageSize = Integer.parseInt(param.get("pageSize").toString());
param.put("page", (page - 1) * pageSize);

// 获取就诊人信息
patientList = patientMapper.getPatientList2(param);
allPatientList = patientMapper.getPatientList3(param);
sum = allPatientList.size();

resultParam.put("patientList", patientList);
resultParam.put("sum", sum); // 总数
resultParam.put("allPatientList", allPatientList); // 详细

} catch (Exception e) {
returnCode = ReturnCode.SYSTEM_ERROR;
returnCode.setMsg(e.getMessage());
} finally {
// 构造返回应答对象
responseEntity = new ResponseEntity(returnCode);
responseEntity.setContent(resultParam);
}
return responseEntity;
}