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的页面实践。

posted @ 2018-04-12 10:46  星朝  阅读(485)  评论(0编辑  收藏  举报