近期项目需要是实现一个通过筛选选取所需数据刷新表格的功能,因为表格只占页面的一小部分,不希望整个也页面都随之刷新,所以首先想到了使用AJAX来实现。
以下介绍解决方法(请忽视拼音命名)。
筛选前先随便给table添加一些数据:
首先在domin中定义相应的数据结构,这里使用之前已经定义好的一个类,里面包含了我们所需的几个属性,所以就直接抱过来
1 public class JichutongjiTable { 2 private int kaoshirenshu; 3 private int yingdaorenshu; 4 private double pingjunfen; 5 private double fangcha; 6 private int zhishidian; 7 private int zuigaofen; 8 private int zuidifen; 9 10 public int getZuigaofen() { 11 return zuigaofen; 12 } 13 14 public void setZuigaofen(int zuigaofen) { 15 this.zuigaofen = zuigaofen; 16 } 17 18 public int getZuidifen() { 19 return zuidifen; 20 } 21 22 public void setZuidifen(int zuidifen) { 23 this.zuidifen = zuidifen; 24 } 25 26 public int getKaoshirenshu() { 27 return kaoshirenshu; 28 } 29 30 public void setKaoshirenshu(int kaoshirenshu) { 31 this.kaoshirenshu = kaoshirenshu; 32 } 33 34 public int getYingdaorenshu() { 35 return yingdaorenshu; 36 } 37 38 public void setYingdaorenshu(int yingdaorenshu) { 39 this.yingdaorenshu = yingdaorenshu; 40 } 41 42 public double getPingjunfen() { 43 return pingjunfen; 44 } 45 46 public void setPingjunfen(double pingjunfen) { 47 this.pingjunfen = pingjunfen; 48 } 49 50 public double getFangcha() { 51 return fangcha; 52 } 53 54 public void setFangcha(double fangcha) { 55 this.fangcha = fangcha; 56 } 57 58 public int getZhishidian() { 59 return zhishidian; 60 } 61 62 public void setZhishidian(int zhishidian) { 63 this.zhishidian = zhishidian; 64 } 65 }
接着在mapper中定义定义所需的方法从数据库中取数据(请忽视乱糟糟的SQL......)
1 @Component 2 public interface JichutongjiMapper { 3 //获取基础信息 4 @Select("SELECT COUNT(*) as kaoshirenshu FROM (SELECT * FROM fenshu GROUP BY xuehao HAVING SUM(xueshengdefen)<>0) as t1 UNION ALL SELECT COUNT(*) as yingdaorenshu FROM (SELECT * FROM fenshu GROUP BY xuehao) as t1 UNION ALL SELECT FLOOR(sum(a)/COUNT(a)) as pingjunfen FROM (SELECT sum(xueshengdefen) as a FROM fenshu GROUP BY xuehao) AS b UNION ALL SELECT variance(a) as fangcha FROM (SELECT sum(xueshengdefen) as a FROM fenshu GROUP BY xuehao) AS b") 5 public List<Integer> getJichutongji(); 6 //获取最高分 7 @Select("SELECT MAX(tt.chengji) AS zuigaofen FROM (SELECT SUM(xueshengdefen) AS chengji FROM fenshu GROUP BY xuehao) AS tt") 8 public Integer getMaxMark(); 9 //获取最低分 10 @Select("SELECT MIN(tt.chengji) AS zuidifen FROM (SELECT SUM(xueshengdefen) AS chengji FROM fenshu GROUP BY xuehao) AS tt") 11 public Integer getMinMark(); 12 }
下一步编写service供controller调用
1 @Service 2 public class JichuqingkuangService { 3 @Autowired 4 private JichutongjiMapper jichutongjiMapper; 5 @Autowired 6 private ShitifenxiMapper shitifenxiMapper; 7 public List<Integer> getJichutongji(){ 8 List<Integer> list= jichutongjiMapper.getJichutongji(); 9 return list; 10 } 11 public Integer getMaxMark(){ 12 return jichutongjiMapper.getMaxMark(); 13 } 14 public Integer getMinMark(){ 15 return jichutongjiMapper.getMinMark(); 16 } 17 }
然后,在controller中调用service并按规定路径返回给前台所需的数据
1 @Controller 2 public class IndexController { 3 4 @Autowired 5 private JichuqingkuangService jichuqingkuangService; 6 @PostMapping(value="/easyuiIndexTable") 7 @ResponseBody 8 public Map<String,String> xiaoguoTable(){ 9 10 Map<String,String> map=new HashMap<>(); 11 List<Integer> list= jichuqingkuangService.getJichutongji(); 12 String highScore = ""+jichuqingkuangService.getMaxMark(); 13 String lowScore = ""+jichuqingkuangService.getMinMark(); 14 15 map.put("totalNumber",""+list.get(0)); 16 map.put("actualNumber",""+list.get(1)); 17 map.put("highScore",highScore); 18 map.put("lowScore",lowScore); 19 map.put("avgScore",""+list.get(2)); 20 map.put("variance",""+list.get(3)); 21 22 23 return map; 24 } 25 } 26
在JS中处理数据并刷新前端显示:
<script type="text/javascript"> function refurbishIndex(){ var optionJson=[]; $.ajax({ type:"post", url:"/easyuiIndexTable", data:{}, async: false, success:function (data) { optionJson=data; var str=""; str+="<tr>"+ "<td>"+optionJson.totalNumber+"</td>"+ "<td>"+optionJson.actualNumber+"</td>"+ "<td>"+optionJson.highScore+"</td>"+ "<td>"+optionJson.lowScore+"</td>"+ "<td>"+optionJson.avgScore+"</td>"+ "<td>"+optionJson.variance+"</td>"+ "</tr>"; document.getElementById("tbodydata").innerHTML=str; } }); } </script>
前端HTML页面table代码:
1 <table style="width:100%;height:190px"> 2 <tr> 3 <td style="width:100%"> 4 <table> 5 <thead> 6 <tr class="cen"> 7 <th>实际人数(单位:人)</th> 8 <th>应到人数(单位:人)</th> 9 <th>最高分(单位:分)</th> 10 <th>最低分(单位:分)</th> 11 <th>考试平均分(单位:分)</th> 12 <th>考试方差(单位:1)</th> 13 </tr> 14 </thead> 15 <tbody id="tbodydata"> 16 <tr> 17 <td>1111</td> 18 <td>2222</td> 19 <td>3333</td> 20 <td>4444</td> 21 <td>5555</td> 22 <td>6666</td> 23 </tr> 24 25 </tbody> 26 </table> 27 </td> 28 </tr> 29 30 </table>
最后,在button中调用此刷新方法:
<button onclick="refurbishIndex()">筛选</button>
至此,便完成了数据读取,传递,刷新的整个流程,点击筛选按钮后,table表格内的数据实现刷新
参考博文:http://blog.csdn.net/love254443233/article/details/48468397