SpringBoot：freemarker + jquery、ajax 实现局部刷新、表格分页

后端使用： SpringMVC + Mybatis + pageHelper分页插件； 

前端使用：freemarker模版 、Jquery + ajax ；

效果展示：

 

• 核心要点

想要实现前端页面 局部刷新效果，首先在html中定义一个 div盒子，然后通过 ajax获取后端数据并使用jquery的empty()方法及append()方法将div中的数据清空并将新的数据插入到 div中，就可以实现局部刷新效果；如下所示：

...
  
      
    

        
这是内容刷新区域
    
    
    
    

为了实现 gif效果图那样的效果，这里将整个 html页面作为ajax获取的data数据；所以需要创建两个页面，一个 index.ftl 首页及一个 index-table.ftl 表格内容页面。(gif效果图中前端使用了bootstrap，后面代码中将css的class等属性都删减，这里只保留的主要代码)。

 

一、 前端 

1. 首页 index.ftl

...
  
      
    

        
这是内容刷新区域
    

     
     

    
    

2. 表格数据页面 index-table.ftl

作为 局部刷新的内容，可以不需要完整的html格式。

分页控制也可以放在这个里面，使用相同jquery、ajax方法就可以达到效果

    
    <#list userPageInfo.list as user>	            
            

        

            

                
序号
                
姓名
                
密码
                
性别
                
生日
                
电话
                
邮箱
                
地址
                
注册时间
                
操作
            
        

                
${user.id}
                
${user.username}
                
 ${user.password}
                
${user.sex} 
                
${user.birthday}
                
${user.mobile}
                
${user.email}
                
${user.address}
                
${user.registerTime?string('yyyy-MM-dd HH:mm:ss')}
                

                    
						  
                        修改
                        删除
                    
                
                    
            
				
    
				
    
     
    

        下一页
    
 


    
    

二、 后台（SpringMVC）

@Controller
@RequestMapping("/admins")
public class AdminController {

	@Resource(name = "userServiceImpl")
	private UserService userService;

	private Logger logger = LoggerFactory.getLogger(getClass());
	
	@RequestMapping(value = "/user/list", method = RequestMethod.POST )
	public String getUserAll(ModelMap modelMap, int pageNum, int pageSize) throws Exception {
		PageHelper.startPage(pageNum, pageSize);
		List userList = userService.findAll("UserMapper.selectAll", null);
		PageInfo pageInfo = new PageInfo<>(userList);
		//logger.info("==pageInfo==:{}" + pageInfo);    
		modelMap.addAttribute("userPageInfo", pageInfo);
		return "/admin/user/index-table";
	}	

}