无框架加载table表中数据

    至今用到的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('');

这样就可以啦

阅读全文

0 0

• 无框架加载table表中数据
• 无框架加载Table表中数据（二）
• Android自定义view实现加载中、加载失败、无数据
• android快速开发框架--快速实现 页面 加载中 加载失败 无数据等状态以及下拉刷新和自动加载
• 动态的把数据显示在table中，点击某一行的删除按钮实现该行的删除（通过ajax实现页面的无刷新加载）
• 动态的把数据显示在table中，点击某一行的删除按钮实现该行的删除（通过ajax实现页面的无刷新加载）
• 将json中的数据加载到table和ul中
• Android 加载成功、加载失败、加载中、无数据四个不同界面的切换
• bootStrap table+ajax加载数据
• bootstrap table动态加载数据
• bootstrap table的父子表数据动态加载
• ajax无刷新加载数据
• Table无数据照样显示边框
• turncate table(删除表中所有数据)
• Table中筛选数据
• 框架加载数据
• iphone利用线程实现数据的加载，并展示在table列表中
• iPhone利用线程实现数据的加载，并展示在table列表中
• 如何使用WinZip给图片加水印?
• 金蝶EAS，代码创建临时表，参考代码
• Debian系统中同步系统的时间
• 三大运营商无线频谱的大体分布-自制表格版
• 诡异的java.lang.IllegalMonitorStateException
• 无框架加载table表中数据
• 玩转Google开源C++单元测试框架Google Test系列(gtest)之三
• Java_log2000_类与对象7
• CentOS下yum的安装及配置
• MySQL日期时间函数大全
• 用servlet获取IP等信息
• angular2 测试问题
• 为Cubieboard2构建自己的的Debian Linux的步骤（3）（分色排版）下载并配置debian系统
• java工具类