近期项目需要是实现一个通过筛选选取所需数据刷新表格的功能，因为表格只占页面的一小部分，不希望整个也页面都随之刷新，所以首先想到了使用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
     
       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
     
       getJichutongji(){ 8         List
      
        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
     
       xiaoguoTable(){ 9 10         Map
      
        map=new HashMap<>();11         List
       
         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中处理数据并刷新前端显示：

　　前端HTML页面table代码：

1 
     
       2     
         3         
28     
29 30 
 4             
         
           5                 
            6 
             7 
 8 
 9 
10 
11 
12 
13 
14 
15                 
           16 
            17 
18 
19 
20 
21 
22 
23 
24 25 
26             
          
           
            
实际人数（单位：人）
            
应到人数（单位：人）
            
最高分（单位：分）
            
最低分（单位：分）
            
考试平均分（单位：分）
            
考试方差（单位：1）
           
          
          
           
            
1111
            
2222
            
3333
            
4444
            
5555
            
6666
           
          
         
27         

　　最后，在button中调用此刷新方法：

筛选　

 

　　至此，便完成了数据读取，传递，刷新的整个流程，点击筛选按钮后，table表格内的数据实现刷新

 

参考博文：