篇三：界面表格分页查询静态刷新
界面加载完后，数据都为静态，如果需要局部刷新页面部分模块，使用ajax加载，然后动态拼接到界面，这种实现大部分时间能够实现。但是，最主要的需要静态刷新的是界面表格的刷新。推荐使用下面的两种方式
一、使用tmpl
在 https://github.com/BorisMoore/jquery-tmpl 下载 jquery.tmpl.min.js 导入项目，目前已上传至"文件"
1、导入js
<script type="text/javascript" src="<%=basePath %>js/common/jquery.tmpl.min.js"></script>
2、jsp界面定义表格：tbody定义id，用于template添加
<table> <!-- 表头（列名） --> <tr> <td> ... </td> ... </tr> <tbody id="tableTemple"> <!-- 通过id将决赛中的模板拼接到 tbody 上 --> </tbody> </table>
3、单独定义一个js，用于拼接模板
<script id="dataTemplate" type="text/x-jquery-tmpl"> <！-- id用来绑定 --> {{each(i,detailList) msg}} //定义详见 c <tr class="(i+1)%2==1?'':'grey'"> //判断单双行，区别显示不同的样式 <td>{{= i+1}}</td> //显示行号 <td>{{= detailList.investor}}</td> <td>{{= detailList.roleType}}</td> <td>{{= detailList.isLeadInvestor}}</td> <td>{{= detailList.investorAmount}}</td> <td>{{= detailList.paymentRate}}</td> <td>{{= detailList.backAmount}}</td> <td>{{= detailList.status}}</td> </tr> {{/each}} </script>
4、拼接模板到表格
两种情况：a、第一次加载界面时使用模板，第一步不查询，加载界面的时候异步请求
b、第一次加载结束后，分页跳转或者带条件查询
<script> //界面加载时调用 $(function(){ addData(); }) //调用ajax查询 function addData(){ $.ajax({ url:'', data:'', type:'post' success: function(data){ //返回实体为json，结构为 data.data.pageResult.list[] $('#tableTemple').empty(); //清空表格tbody $('#dataTemplate').tmpl({msg,data.data.pageResult}) .appendTo('#tableTemple') //绑定 }, }); } </script>
list集合添加别名
$('#dataTemplate').tmpl({msg,data.data.pageResult.list}) {{each(i,detailList) msg}} <tr> <td>{{= i+1}}</td> ... </tr> {{/each}}
list集合不添加别名
$('#dataTemplate').tmpl(data.data.pageResult) {{each(i,detailList) list}} <tr> <td>{{= i+1}}</td> ... </tr> {{/each}}
二、表格部分使用单独的界面，然后include
原理：1、分别创建index.jsp和list.jsp，index.jsp为全部展示界面，list.jsp主要放表格部分，index.jsp中include界面list.jsp
2、在controller中写一个单独查询数据的方法 getPage（参数...），参数接收包含 查询条件、分页信息；
3、第一次跳转，界面指向 index.jsp，需要包含 getPage（）；
4、接下来 查询条件、分页跳转指向 list.jsp
index.jsp
<!DOCTYPE html> <%@ page pageEncoding="UTF-8" %> <%@ include file="../common/global.jsp" %> <!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]--> <!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <!-- BEGIN HEAD --> <head> <title>${PU_TITLE}</title> </head> <body class="page-header-fixed"> <%@ include file="../common/header.jsp" %> <div class="page-container"> <!-- BEGIN SIDEBAR --> <%@ include file="../common/left.jsp" %> <!-- END SIDEBAR --> <!-- BEGIN CONTENT --> <div class="page-content-wrapper page_change"> <div class="page-content"> <!-- BEGIN DASHBOARD STATS --> <div class="row"> <div class="col-md-12"> <!-- BEGIN EXAMPLE TABLE PORTLET--> <div class="portlet box light-white"> <div class="portlet-title"> <div class="caption"> <i class="fa fa-film"></i><span class="break"></span> 发布编辑员管理 > 编辑员管理 </div> </div> <div id="sample_1_wrapper" class="dataTables_wrapper" role="grid"> <div class="row"> <div class="col-md-12"> <form id="param_search_form" data-url="${BASE }/sys/editor/editor/list"> <div style="width: 98%;float:left;"> <label>名称: <input type="text" name="loginName" aria-controls="sample_1" class="form-control input-inline" style="width:170px;"> </label> <label>编辑组: <select id="groupId" name="groupId" style="width:80px;height:33px;border:1px solid #E5E5E5;"> <option value="" >全部</option> <c:forEach items="${GroupNameEnums}" var="o"> <option value="${o.id }" >${o.groupName }</option> </c:forEach> </select> </label> <label>状态: <select id="status" name="status" style="width:80px;height:33px;border:1px solid #E5E5E5;"> <option value="" >全部</option> <c:forEach items="${OperatorPropStatusEnums}" var="o"> <option value="${o.id }" >${o.name }</option> </c:forEach> </select> </label> <button type="button" id="sample_editable_4_new" class="btn light blue param_list_query"> <!-- 搜索查询 --> 查询<i class="fa fa-search"></i> </button> </div> </form> </div> </div> <div id="data_list"> <%@ include file="editor_list.jsp" %> </div> </div> </div> </div> <!-- END EXAMPLE TABLE PORTLET--> </div> </div> <!-- END DASHBOARD STATS --> <div class="clearfix"> </div> </div> </div> <!-- END CONTENT --> </div> <!-- END CONTAINER --> <!-- BEGIN FOOTER --> <%@ include file="../common/footer.jsp" %> <!-- END FOOTER --> <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <%@ include file="../common/script.jsp" %> <script src="${BASE}/www/lib/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <script src="${BASE}/www/js/commonPage.js" type="text/javascript"></script> <script src="${BASE}/www/js/user/user.js" type="text/javascript"></script> <script> jQuery(document).ready(function() { App.init(); // initlayout and core plugins $("#ext-diction-insert").click(function(){ Guduo.showZDialog("${BASE }/sys/editor/editor/addUI", 850, 600) }); }); var _sysPms = { editUI : function(url){ Guduo.showZDialog(url,850,600); }, edit : function(){ $('#edit_form').ajaxForm({ type: 'post', url: $("#edit_form").data("url"), dataType: 'html', beforeSubmit: function() { return $('#edit_form').validationEngine('validate',{ promptPosition:"topLeft", scroll:false }); }, success: function(res) { if(res=="SUCCESS"){ showInfo("修改成功!",function(){parent.location.reload()}); }else{ showInfo(res); } } }); }, del : function(param){ array = param.split(","); if (array[1] > 0) { //利用对话框返回的值 （true 或者 false） if (confirm("用户有未完成任务"+ array[1] +"个，确定要删除吗？")) { $.ajax({ type : 'post', url : '${BASE }/sys/editor/editor/del', data : { "userId" : array[0] }, success : function(res) { if (res == "SUCCESS") { showInfo("删除成功", function() { parent.location.reload(); }); } else if (res == "FALSE") { showInfo("删除失败", function() { parent.location.reload(); }); } else { alert(res); } } }); } } else { if (confirm("您确定删除此项")) { $.ajax({ type : 'post', url : '${BASE }/sys/editor/editor/del', data : { "userId" : array[0] }, success : function(res) { if (res == "SUCCESS") { showInfo("删除成功", function() { parent.location.reload(); }); } else if (res == "FALSE") { showInfo("删除失败", function() { parent.location.reload(); }); } else { alert(res); } } }); } } } } </script> <!-- END JAVASCRIPTS --> </body> <!-- END BODY --> </html>
list.jsp
<%@ page pageEncoding="UTF-8" %> <%@ include file="../common/global.jsp" %> <c:set var="pageList" value="${page.recordList}"/> <div class="table-scrollable"> <table class="table table-striped table-bordered table-hover dataTable" id="sample_1" aria-describedby="sample_1_info"> <thead> <tr> <!-- <th class="table-checkbox" style="text-align:center; width: 23px;"> <div class="checker"><span><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes"></span></div> </th> --> <th style="text-align:center; width: 23px;"> <!-- 序号 -->序号 </th> <th style="text-align:center; width: 100px;"> 操作 </th> <th style="text-align:center; width: 100px;"> 编辑员 </th> <th style="text-align:center; width: 100px;"> 姓名 </th> <th style="text-align:center; width: 100px;"> 任务数量 </th> <th style="text-align:center; width: 100px;"> 所属编辑组 </th> <th style="text-align:center; width: 100px;"> 状态 </th> <th style="text-align:center; width: 100px;"> 组长 </th> <th style="text-align:center; width: 150px;"> 创建时间 </th> </tr> </thead> <tbody> <c:forEach var="data" items="${pageList}" varStatus="i"> <tr class="gradeX odd"> <%-- <td style="text-align:center"> <div class="checker"><span><input type="checkbox" class="checkboxes" value="${data.id}"></span></div> </td> --%> <td style="text-align:center">${(page.currentPage-1)*page.numPerPage + i.count}</td> <td style="text-align:center"> <z:permission value="pms:editor:edit"> <a href="#" onclick="_sysPms.editUI('${BASE }/sys/editor/editor/editUI?userId=${data.id}','修改')" style="color:blue"> 修改 </a> </z:permission> <z:permission value="pms:editor:del"> <c:if test="${data.id != data.groupLeaderId}"> | <a href="#" onclick="_sysPms.del('${data.id},${data.task}')" style="color:blue"> 删除 </a> </c:if> </z:permission> <z:permission value="pms:editor:accept"> <c:if test="${data.distributionStatus == 2}"> | <a href="#" onclick="Guduo.buttonCommon('${BASE }/sys/editor/editor/accept?userId=${data.id}','接受')" style="color:blue"> 接受 </a> </c:if> </z:permission> <z:permission value="pms:editor:stop"> <c:if test="${data.distributionStatus == 1}"> | <a href="#" onclick="Guduo.buttonCommon('${BASE }/sys/editor/editor/stop?userId=${data.id}','停止')" style="color:blue"> 停止 </a> </c:if> </z:permission> </td> <td style="text-align:center">${data.loginName }</td> <td style="text-align:center">${data.realName }</td> <td style="text-align:center">${data.task }</td> <td style="text-align:center">${data.groupName }</td> <td style="text-align:center"> <c:forEach items="${OperatorPropStatusEnums}" var="e"> <c:if test="${data.distributionStatus ne null and data.distributionStatus eq e.id}">${e.name}</c:if> </c:forEach> </td> <td style="text-align:center">${data.userName}</td> <td style="text-align:center"><f:formatDate value="${data.createTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td> </tr> </c:forEach> </tbody> </table> </div> <tag:pager_backstage id="list_page" pager="${page}"/>
Controller
/* * 进入查询页面 */ @RequestMapping("/index") public ModelAndView index(Model model) { getPage(model); return new ModelAndView("/editor/index"); } @RequestMapping("/list") public ModelAndView list(Model model) { model.addAttribute("bsMenu", "sys.editor.editor"); getPage(model); return new ModelAndView("/editor/list"); } /* * 分页查询列表 */ public void getPage(Model model) { try{ Map<String, Object> paramMap=new HashMap<String, Object>();// 业务条件查询参数 String loginName = getString("loginName");//登录名称 String groupId = getString("groupId");//组名 String status = getString("status");//状态（1：接收分配，2：停止分配） if(StringUtils.isNotBlank(loginName)){ paramMap.put("loginName", loginName); } if(StringUtils.isNotBlank(groupId)){ paramMap.put("groupId", groupId); } if(StringUtils.isNotBlank(status)){ paramMap.put("status", status); } super.pageBean = userEditorgroupRelationService.editorlistPage(getPageParam(), paramMap); //组查询条件 Map<String, Object> parameter = new HashMap<String, Object>(); parameter.put("flag", "0");//删除标志（0：启用，1：删除） List<EditorGroup> groupList = editorGroupService.findEditorGroup(parameter); model.addAttribute("page",pageBean); model.addAttribute("param",paramMap); // 回显查询条件值 model.addAttribute("OperatorPropStatusEnums", OperatorPropStatusEnum.values()); model.addAttribute("GroupNameEnums", groupList); }catch(Exception e){ e.printStackTrace(); // log.error("==> list exception",e); } }
浙公网安备 33010602011771号