先上代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx">${ pageContext.request.contextPath }</c:set>
<html>
<head>
<title>号码段管理</title>
</head>
<body>
<content tag="breadcrumb-list">
<li class="active">号码段管理</li>
</content>
<div class="panel panel-default">
<div class="panel-heading">
<span class="h3"><i class="icon-table icon-large"></i> 号码段管理</span>
<div class="space-4"></div>
<form class="form-inline" role="form" id="search-form">
<div class="form-group">
<label for="q-form-username">区域号</label> <input type="text"
class="form-control" id="seg_code" name="seg_code"
value="${param.seg_code }" placeholder="区域号">
</div>
<div class="form-group">
<label for="q-form-username">号段</label> <input type="text"
class="form-control" id="seg_num" name="seg_num"
value="${param.seg_num }" placeholder="号段">
</div>
<button type="submit" class="btn btn-info btn-sm">
<i class="icon-search"></i> 查询
</button>
<button id="save-btn" type="button" οnclick="save()" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-plus"></span> 新增
</button>
</form>
</div>
<div class="table-responsive">
<table id="mainTable"
class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center">区域号</th>
<th>号段</th>
<th>省</th>
<th>市</th>
<th>运营商</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="item">
<tr>
<td class="center">${item.segCode }</td>
<td>${item.segNum }</td>
<td>${item.provinceName }</td>
<td>${item.cityName }</td>
<td><c:if test="${item.operator.value==1 }">
${item.operator.desc }
</c:if> <c:if test="${item.operator.value==2 }">
${item.operator.desc }
</c:if> <c:if test="${item.operator.value==3 }">
${item.operator.desc }
</c:if></td>
<td><a class="green"
href="${ctx }/mobileseg/modifyskip/${item.id}"> <i
class="icon-pencil bigger-130"></i>
</a> <a class="red"
οnclick="javascript:$.opRecord('确认删除号码段?', '${ctx }/mobileseg/delete/${item.id }');">
<i class="icon-trash bigger-130"></i>
</a></td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="text-center"><!-- 注意这块代码 -->
<c:url var="url" value="">
<c:param name="seg_code">${param.seg_code }</c:param>
<c:param name="seg_num">${param.seg_num }</c:param>
</c:url>
<jsp:include page="/WEB-INF/jsp/pager/simple.jsp">
<jsp:param name="url" value="${url }" />
</jsp:include>
</div>
</div>
</div>
<script>
var flushMessage = '${message}';
</script>
<content tag="javascript-block"> <script>
jQuery(function($) {
//操作消息
if (flushMessage) {
$.showTip("info", flushMessage);
}
$.showLeftMenu("${ctx}/mobileseg/index");
});
function save(){
window.location.href="${ctx}/mobileseg/saveskip";
}
</script></content>
</body>
</html>
注意上面<div class="text-center">中的代码
<c:url>中设置了两个<c:param>参数,这两个参数为上面查询条件,区域号和号段,下面<jsp:include>中引入的simple.jsp为分页界面(用来显示上一页、下一页,页码),这样设置的好处是,点击查询按钮时,form表单提交到默认的Url路径下,查询的参数自动拼在url后面,这样点击下一页时,pageNum和查询条件可以直接拼在url后面,从而不会让查询参数遗失导致分页显示内容错误。