jsp页面关建字查询出记录后,点下一页关键字会清空,怎么保持关键字不变而进行下一页操作?
解决方案一:
1 把关键字带回后台,从后台再次传入!
2 把关键字传入cookie,从cookie获取
3 把表格一栏放在iframe中,搜索时,刷新iframe即可
解决方案二:
用2个div分开就行,就是说上面关键字那个行里的所有放在一个div里,下面table放在另一个div里。我就是那样实现的
解决方案三:
关键字做参数提交,每页都获取这个参数,重新给关键字查询赋值,并且分页每次查询都去input标签的value值即可。这次用的这个思路解决的,很简单,每次查询后将模糊查询关键字通过如下代码返回到页面:
modelMap.addAttribute("telePhoneNo",telePhoneNo);
modelMap.addAttribute("userName",userName);
前台的form中的input标签中用EL标签给value属性复制就可了,完整代码如下:
<div class="row" style="margin-top:10px;">
<div class="col-md-12">
<form action="${ctx}/member/list" method="post" id="selectForm">
<div class="form-inline compact">
<div class="form-group">
<div class="form-group">
<label for="">登录名称</label>
</div>
<div class="input-group">
<input class="form-control input-sm" id="userName" name="userName" type="text" value="${userName}">
</div>
</div>
<div class="form-group">
<div class="form-group">
<label for="">手机号码</label>
</div>
<div class="input-group">
<input class="form-control input-sm" id="telePhoneNo" name="telePhoneNo" type="text" value="${telePhoneNo}">
</div>
</div>
<button type="submit" class="btn btn-primary btn-sm" style="margin-left:15px;">查询</button>
</div>
</form>
</div>
</div>
<c:if test="${pageInfo.list!=null}">
<div class="row" style="margint-top:10px;">
<div class="col-md-12">
<div id="sample_2_wrapper" class="dataTables_wrapper no-footer">
<div class="table-scrollable">
<table id="users_table"
class="table table-striped table-bordered table-hover dataTable no-footer"
role="grid" aria-describedby="sample_2_info">
<thead>
<tr role="row">
<th rowspan="1" colspan="1" style="width: 20px;text-align: center;">
序号</th>
<th rowspan="1" colspan="1" style="width: 80px;">
用户名</th>
<th rowspan="1" colspan="1" style="width: 80px;">
手机号</th>
<th rowspan="1" colspan="1" style="width: 60px;">
城市</th>
<th rowspan="1" colspan="1" style="width: 60px;">
生日</th>
</tr>
</thead>
<tbody>
<c:forEach items="${pageInfo.list}" var="rate" varStatus="status">
<c:if test="${status.index%2==0}">
<tr class="even">
</c:if>
<c:if test="${status.index%2>0}">
<tr class="odd">
</c:if>
<td style="text-align: center;">${status.index + 1}</td>
<td>${rate.userName}</td>
<td>${rate.telePhoneNo}</td>
<td>${rate.city}</td>
<td><fmt:formatDate value="${rate.birthDate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!--显示分页信息-->
<div class="row">
<!--文字信息-->
<div class="col-md-6">
当前第 ${pageInfo.pageNum} 页.总共 ${pageInfo.pages} 页.一共 ${pageInfo.total} 条记录
</div>
<!--点击分页-->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#" id = "firstPage" onclick="firstPage()">首页</a></li>
<!--上一页-->
<li>
<c:if test="${pageInfo.hasPreviousPage}">
<a href="#" id="priviewPage" onclick="priviewPage()" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</c:if>
</li>
<!--循环遍历连续显示的页面,若是当前页就高亮显示,并且没有链接-->
<c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
<c:if test="${page_num == pageInfo.pageNum}">
<li class="active"><a href="#">${page_num}</a></li>
</c:if>
<c:if test="${page_num != pageInfo.pageNum}">
<li><a href="${pageContext.request.contextPath}/member/list?pageNum=${page_num}&pageSize=10" id="everyPage" onclick="everyPage()">${page_num}</a></li>
</c:if>
</c:forEach>
<!--下一页-->
<li>
<c:if test="${pageInfo.hasNextPage}">
<a href="javascript:void(0);" id="nextPage" onclick="nextPage()" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</c:if>
</li>
<li><a href="#" id="lastPage" onclick="lastPage()">尾页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</c:if>
<script>
/*Paging begin*/
function firstPage() {
document.getElementById("firstPage").href="${pageContext.request.contextPath}/member/list?pageNum=1&pageSize=10&telePhoneNo="+document.getElementById("telePhoneNo").value+"&userName="+
document.getElementById("userName").value;
}
function priviewPage() {
document.getElementById("priviewPage").href="${pageContext.request.contextPath}/member/list?pageNum=${pageInfo.pageNum-1}&pageSize=10&telePhoneNo="+document.getElementById("telePhoneNo").value+"&userName="+
document.getElementById("userName").value;
}
function everyPage() {
document.getElementById("everyPage").href +="&telePhoneNo="+document.getElementById("telePhoneNo").value+"&userName="+
document.getElementById("userName").value;
}
function nextPage() {
document.getElementById("nextPage").href="${pageContext.request.contextPath}/member/list?pageNum=${pageInfo.pageNum+1}&telePhoneNo="+document.getElementById("telePhoneNo").value+"&userName="+
document.getElementById("userName").value;
}
function lastPage() {
document.getElementById("lastPage").href="${pageContext.request.contextPath}/member/list?pageNum=${pageInfo.pages}&pageSize=10&telePhoneNo="+document.getElementById("telePhoneNo").value+"&userName="+
document.getElementById("userName").value;
}
/*Paging end*/
</script>
后台代码就简单了,不说了,用SpringMVC接接收参数,用PageHelper插件做分页即可,这个可以看作是PageHelper的页面实践。