至今用到的jquery和bootstrap都有各自的加载table的方式，jquery是datagrid,bootstrap是bootstrapTable。如果不用这些框架的话，也是可以刷新table的，只不过需要拼接html。
----------------------------------------------------------------------------
现在有这样一个情况，点击下图中的查询，表中数据加载。
----------------------------------------------------------------------------------------------
JSP代码：
<table id="resultTable"width="100%" border="0" cellspacing="1" cellpadding="0"> <thead> <tr> <td id="declaration_id" height="30" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">序号</td> <td id="tax_no" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">纳税人识别号</td> <td id="taxpayer" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">纳税人名称</td> <td id="company" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">纳税企业名称</td> <td id="result" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">申报结果</td> <td id="info" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">申报结果说明</td> </tr> </thead> <tbody></tbody> </table> function search(){ $("#resultTable tbody").html(''); var account=$("#account").val().trim(); var company=$("#company").val().trim(); var begin_time=$("#begin_time").datebox('getValue'); var end_time=$("#end_time").datebox('getValue'); var tax_no=$("#tax_no").val().trim(); $.ajax({ url:'<%=basePath %>customer/account/findReportingResult3', data:{account:account,company:company,begin_time:begin_time, end_time:end_time,tax_no:tax_no}, dataType:"json", type:"post", success: function(result){ data = eval('result' ); console.log(data); sum=data.length; var message=null; if(data.length>=5){ message=[result[0],result[1],result[2],result[3],result[4]]; }else{ message=data; } makeEducPlanTable(message); start=1; }, error: function(){ alert("查找申报结果失败"); return false; } }) } //查找所有下属企业 @RequestMapping("findReportingResult3") @ResponseBody //有 算是json对象 public void findReportingResult(HttpServletRequest req,HttpServletResponse res) throws IOException{ JSONArray jsonArray=new JSONArray() ; Map<String, String> map=new HashMap<String, String>(); map.put("account", req.getParameter("account")); map.put("company", req.getParameter("company")); map.put("begin_time", req.getParameter("begin_time")); map.put("end_time", req.getParameter("end_time")); map.put("tax_no", req.getParameter("tax_no")); //List<ReportingResult> lists=new ArrayList<ReportingResult>(); lists=registerService.findReportingResult(map); jsonArray =JSONArray.fromObject(lists); res.setContentType("text/html;charset=utf-8"); PrintWriter pw = res.getWriter(); pw.write(jsonArray.toString()); pw.flush(); } 这里是对tbody增加内容，通过ajax向后台请求数据，返回的json,通过for来拼接html function makeEducPlanTable(result){ var data = eval( result); var tab = $("#resultTable tbody"); var html = []; if(data.length > 0){ for(var i=0;i<data.length;i++){ var plan = data[i]; if(plan.result == '成功'){//绿色 trBgColor = "#02B620"; }else{//红色 trBgColor = '#F00'; } //align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;" //html.push("<tr align='center' bgcolor='#CDE7E8' style='padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;' >"); html.push("<tr >"); html.push("<td height='40' align='center' bgcolor='#FFFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem;'> "+ plan.declaration_id+"</td>"); html.push("<td align='center' bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem; '> "+ plan.tax_no+"</td>"); html.push("<td align='center' bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem; '>"+ plan.taxpayer +"</td>"); html.push("<td align='center' bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem; '>"+ plan.company +"</td>"); html.push("<td align='center' bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem; '><span style='color:"+trBgColor+"'>"+ plan.result +"</span></td>"); html.push("<td align='center' bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem;'>"+ plan.info +"</td>"); html.push("</tr>"); } } //tab.html(""); tab.append(html.join("")); //tab.append(html); }---------------------------------------------------------------------------------------------------------------------------------------- 当然这样还没有结束，如果一直点击的话，会出现下面这种情况： .所以为了避免这种情况的发生，需要在每次查询的时候讲table中的tbody内容清空: $("#resultTable tbody").html(''); 这样就可以啦
