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

时间：2024-04-07 20:00:29

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

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

效果展示：

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

 

  • 核心要点

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

<html>
...
<body>  
    <!-- 刷新的内容 -->  
    <div class="container-fluid">
        <p>这是内容刷新区域</p>
    </div>
    
    <!-- js 代码 -->
    <script type="text/javascript">        
        function getData(){
            $.ajax({
                url:'',
                type:'' ,
                ...
                success:function(data){
                    $(".container-fluid").empty();        // 先清空 div中的内容
                    $(".container-fluid").append(data);   // 然后在 div中插入 ajax获取的内容
                }               
            });
        }
    </script>
</body>
<html>

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

 

一、 前端 

1. 首页 index.ftl

<html>
...
<body>  
    <!-- 刷新的内容 -->  
    <div class="container-fluid">
        <p>这是内容刷新区域</p>
    </div>

    <!-- 分页导航条 --> 
    <!--<div>
        <a >上一页，下一页</a>
    </div> --> 

    <!-- js 代码 -->
    <script type="text/javascript"> 
        var pageSize = 10 ; 
        $(function(){
            toPage(1); //加载完index页面后，获取第一页表格数据
        });
        
        //跳转第几页
        function toPage( num ){		
            $.ajax({
            url:'${request.contextPath}/admins/user/list',
            type:'POST',
            data:{
                'pageNum':num,        //第几页
                'pageSize':pageSize    // 每页数据数
            },
            success:function(data){           
                $(".container-fluid").empty();
                $(".container-fluid").append(data);
            }
        });
        

    </script>
</body>
<html>

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

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

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

<div id="index_table">
    <table >
        <thead>
            <tr >
                <th >序号</th>
                <th >姓名</th>
                <th >密码</th>
                <th >性别</th>
                <th >生日</th>
                <th >电话</th>
                <th >邮箱</th>
                <th >地址</th>
                <th >注册时间</th>
                <th >操作</th>
            </tr>
        </thead>
    <#list userPageInfo.list as user>	            
            <tr>
                <td >${user.id}</td>
                <td >${user.username}</td>
                <td > ${user.password}</td>
                <td >${user.sex} </td>
                <td >${user.birthday}</td>
                <td >${user.mobile}</td>
                <td >${user.email}</td>
                <td >${user.address}</td>
                <td >${user.registerTime?string('yyyy-MM-dd HH:mm:ss')}</td>
                <td >
                    <div >						  
                        <a onclick="btn_Update(${user_index})">修改</a>
                        <a >删除</a>
                    </div>
                </td>                    
            </tr>				
    </#list>
				
    </table>
    <!-- 分页导航条 --> 
    <div>
        <a onclick="toPage(${userPageInfo.pageNum +1})">下一页</a>
    </div> 
</div>

    <!-- js 代码 -->
    <script type="text/javascript"> 
        var pageSize = 10 ; 
        
        //跳转第几页
        function toPage( num ){		
            $.ajax({
            url:'${request.contextPath}/admins/user/list',
            type:'POST',
            data:{
                'pageNum':num,        //第几页
                'pageSize':pageSize    // 每页数据数
            },
            success:function(data){           
                $("#index_table").empty();
                $("#index_table").append(data);
            }
        });
        

    </script>

二、 后台（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<User> userList = userService.findAll("UserMapper.selectAll", null);
		PageInfo<User> pageInfo = new PageInfo<>(userList);
		//logger.info("==pageInfo==:{}" + pageInfo);    
		modelMap.addAttribute("userPageInfo", pageInfo);
		return "/admin/user/index-table";
	}	

}

 

 

相关文章