thymeleaf动态渲染table

      情况：刚接触thymeleaf模版，网上找了一些文章，也没有对jQuery.load(url,data)的参数加以说明，现在记录下，具体的请查看代码。

      需求  ： 动态无刷新的渲染表格内容，说白了就是前台html页面load(发请求，可以带参数)一个代码片段（table.html），代码片段中的业务js自己写就可以了。

注意：

1在控制类中给代码片段table.html准备数据，用于渲染表格。

2主页面中的

是关键。

 

    thymeleaf-doc

    https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html   

    layui-table

     https://www.layui.com/doc/element/table.html

thymeleaf+layui渲染的主页面table效果如上图，代码如下 

 

    已选题目：
    

        

            

            

                
#
                
题目类型
                
题干
                
创建人
                
创建时间
                
备注信息
                
操作
            
            
            

            

                

                
                
单选题
                
多选题
                
混合题
                
简答题
                
                

                

                

                

                

                    新增
                    删除     
                
            
            
        
    

 

发送请求获取页面（jQuery.load()）

$('#table_refresh').load("/system/questionnaire/table",{Action:"post",metas:str});

参数说明：

        /system/questionnaire/table // 请求地址

        Action:"post" // 请求方式

        metas:str  //此处str我放的是字符串，字符串id  eg. 1, 2 , 3 , 5 , 12

controller代码：

@ApiOperation("为编辑页面表格准备数据")
@PostMapping("/table")
public String preparedDataForTable(String metas, ModelMap modelMap) {
    String[] metasArray = metas.split(",");
    List questionIdList = Arrays.asList(metasArray);
    List questionList = new ArrayList<>();
    questionIdList.forEach(item -> {
        questionList.add(questionService.getById(item));
    });
    modelMap.put("questionList", questionList);//为table.html准备数据
    return prefix + "/table";
}

table.html代码如下，只是拿过来主页面的table

    

    

        
#
        
题目类型
        
题干
        
创建人
        
创建时间
        
备注信息
        
操作
    
    
    

    

        

        
        
单选题
        
多选题
        
混合题
        
简答题
        
        

        

        

        

        

            新增
            删除