我用bootstarp3+SPRING3做分页查询(AJAX分页),后台分页数据都已经能拿到,就是前台显示有问题,前台代码:
<%@ page
language="java"
contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib
uri="http://java.sun.com/jsp/jstl/core"
prefix="c"%>
<!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">
<title>demo</title>
<jsp:include page="addProduct.jsp"></jsp:include>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../manager/product/js/jquery-1.9.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../manager/product/js/bootstrap.min.js"></script>
<script src="../manager/product/js/bootstrap-paginator.min.js"></script>
<!-- Bootstrap -->
<link
href="../manager/product/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript">
function vaildate(form) {
return true;
}
$(document).ready(function() {
$("#saveBtn").click(function() {
var form = $("#productInfo");
form.action = "/product/save.do";
if (vaildate(form)) {
form.submit();
} else {
alert("请录入完整信息");
return;
}
});
$("#selectAll").click(function() {
var isSelectAll = document.getElementById("selectAll").checked;
$("input[name='proId']").each(function() {
$(this).attr("checked", isSelectAll);
});
});
$("#deleteBtn").click(function() {
delChk = $("input:checked");
if (delChk.length > 0) {
if (confirm("Are you sure delete the record?")) {
var ids = "";
var delUrl = "delete.do?ids=";
for ( var i = 0; i < delChk.length; i++) {
if (i == delChk.length - 1) {
delUrl = delUrl + delChk.get(i).value;
} else {
delUrl = delUrl + delChk.get(i).value + ",";
}
}
alert(delUrl);
$.ajax({
url : delUrl,
data : {
ids : ids
},
cache : false,
success : function(html) {
alert("Delete successfully");
refresh();
},
error : function(html) {
alert("Delete failly");
refresh();
}
});
} else {
return;
}
} else {
alert("Please select the record to delete");
return;
}
});
$("Button[name='editBtn']").each(function() {
$(this).click(function() {
var proId = $(this).attr("objId");
alert("helo world.." + proId);
var editUrl = "show.do";
$.ajax({
url : editUrl,
dataType : 'json',
data : {
id : proId
},
cache : false,
success : function(data) {
alert("--------------" + data.pid);
loadProduct(data);
},
error : function(html) {
//alert(html);
alert("Load Data failly");
refresh();
}
});
});
});
});
function refresh() {
window.location.reload();
}
</script>
</head>
<body>
<div
class="container-fluid"
style="width: 960px;">
<div class="row-fluid">
<h3>产品列表</h3>
</div>
<div class="row">
<div class="col-md-2 pull-right">
<ul
class="nav nav-pills nav-justified"
role="tablist">
<li
role="presentation"
class=" active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
</div>
<div
class="row"
style="margin-top: 30px;">
<div
class="col-sm-2"
style="border-width: 2px; border-color: #AA0000">
<ul
class="nav nav-pills nav-stacked"
role="tablist">
<li
role="presentation"
class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<div
class=" col-sm-8"
style="margin-left: 50px; margin-right: 0; border-width: 2px; border-color: #AA0000">
<div class="col-md-4 pull-right">
<ul
class="nav nav-pills nav-justified "
role="tablist">
<li
role="presentation"
class=" active"
style="padding-left: 10px;">
<button class="btn btn-sm btn-info">查询</button>
</li>
<li
role="presentation"
class=" active"
style="padding-left: 10px;">
<button
id="addProduct"
class="btn btn-sm btn-success"
data-toggle="modal"
data-target="#productDialog">添加产品</button>
</li>
<li
role="presentation"
class=" active"
style="padding-left: 10px;">
<button
id="deleteBtn"
class="btn btn-sm btn-danger">删除</button>
</li>
</ul>
</div>
<div style="margin-top: 40px;">
<table
id="productList"
class="table table-bordered table-hover">
<tr>
<td><input
id="selectAll"
class="checkbox"
type="checkbox" /></td>
<td>产品编号</td>
<td>产品名称</td>
<td>产品规格</td>
<td>产品数量</td>
<td>产品价格</td>
<td>操作</td>
</tr>
<c:forEach
var="product"
items="${pageResult.resultList}">
<tr>
<td><input
name="proId"
class="checkbox"
type="checkbox"
value="${product.pid}" /></td>
<td>${product.product_code}</td>
<td>${product.product_name}</td>
<td>${product.detail}</td>
<td>${product.note}</td>
<td>${product.product_code}</td>
<td><button
name="editBtn"
objId="${product.pid}"
class="btn btn-sm-block"
onclick="">修改</button></td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
</div>
<div id="pagination">
<!--
<ul class="pagination">
<li class="disabled"><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
</ul>
-->
</div>
<script type="text/javascript">
var options = {
currentPage:${pageResult.pageIndex},
totalPages: ${pageResult.pageCount},
itemContainerClass: function (type, page, current) {
return (page === current) ? "active" : "pointer-cursor";
},
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "前一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
onPageClicked: function(e,originalEvent,type,page){
e.stopImmediatePropagation();
var currentTarget = $(e.currentTarget);
var pages = currentTarget.bootstrapPaginator("getPages");
// Ajax calling
setTableData(page);
currentTarget.bootstrapPaginator("show",page);
// updatePagesInfo($("#totalRecord").val(), page);
},
pageUrl: function(type, page, current){
return "queryByPage?pageIndex="+current+"&pageSize="+10;
}
};
$('#pagination').bootstrapPaginator(options);
</script>
</body>
</html>
后台Spring Controllor查询代码如下:
@RequestMapping(value = "/product/queryByPage")
@ResponseBody
public Map queryByPage(
@RequestParam(value = "pageIndex", required = true) Integer pageIndex,
@RequestParam(value = "pageSize", required = false) Integer pageSize) {
Map resultMap = new HashMap();
try {
setPageIndex(pageIndex);
if (pageSize != null && !"".equals(pageSize)) {
setPageSize(pageSize);
}
setTotalCount(productService.totalCount(tableName, Product.class));
List<Product> resultList=productService.queryByPage(tableName, Product.class,
getPageIndex(), getPageSize(),
productService.getConditionMap());
setList(resultList);
if (getTotalCount() % pageSize == 0) {
setPageCount((int) (getTotalCount() / pageSize));
} else {
setPageCount((int) (getTotalCount() / pageSize) + 1);
}
PageUtils<Product> page = new PageUtils<Product>();
page.setPageCount(getPageCount());
page.setPageIndex(getPageIndex());
page.setPageSize(getPageSize());
page.setTotalCount(getTotalCount());
page.setResultList(getList());
resultMap.put("pageResult", page);
return resultMap;
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
return null;
}
}
resultMap 里面已经包含分页信息和数据集,怎样在前台显示。。很急啊。打救一下小弟。