近期项目需要是实现一个通过筛选选取所需数据刷新表格的功能，因为表格只占页面的一小部分，不希望整个也页面都随之刷新，所以首先想到了使用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