spingboot+thymeleaf+ajax分页写法做个笔记

效果

后端代码

分页配置

 /**
     * 目的防止驼峰命名规则
     * @return
     */
    @Bean
    public ConfigurationCustomizer configurationCustomizer(){
        return new ConfigurationCustomizer(){
            @Override
            public void customize(Configuration configuration) {
                configuration.setMapUnderscoreToCamelCase(true);
            }
        };
    }

    /**
     * 使用方法直接调用这个就行
     *  PageHelper.startPage(1, 10);
     *  System.out.println("MyBatisConfiguration.pageHelper()");
     * 分页插件
     * @return
     */
    @Bean
    public PageHelper pageHelper() {
        PageHelper pageHelper = new PageHelper();
        Properties p = new Properties();
        p.setProperty("offsetAsPageNum", "true");
        p.setProperty("rowBoundsWithCount", "true");
        p.setProperty("reasonable", "true");
        pageHelper.setProperties(p);
        return pageHelper;
    }

controler

/**
     * 查询报表全部数据（分页查询）
     *
     * @return
     */
    @GetMapping("/resultList")
    @ResponseBody
    public Msg getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
        // 引入PageHelper分页插件
        // 在查询之前只需要调用，传入页码，以及每页的大小
        PageHelper.startPage(pn, 5);
        // startPage后面紧跟的这个查询就是一个分页查询
//        List emps = reportTotalService.findAll();
        List emps = reportTotalService.findreprt();

        // 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。
        // 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数
        PageInfo page = new PageInfo(emps, 5);

        return Msg.success().add("pageInfo", page);
    }

前端代码

公共代码

    
    
    
    
    

    

    
    
    
    
    
    
    
    

    
    
    
    
    
    

    
    






    

        Admin接口测试实验地 - Collect from 接口测试部
    
    





    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    





    

        

             报告展示平台
        
        

        
        

            

                
            
            

                Welcome,
                
admin
            
        
        
        

        
        

        

            

                
General
                

                    
 接口区 
                        

                            
项目管理
                            
                            
                            
                            
                            
                        
                    
                    
 UI自动化区 
                        

                            
应用管理
                            
模块管理
                            
接口管理
                            
用例管理
                            
配置管理
                        
                    
                    
 专项区 
                        

                            
应用管理
                            
模块管理
                            
接口管理
                            
用例管理
                            
配置管理
                        
                    
                    
 性能测试区 
                        

                            
应用管理
                            
模块管理
                            
接口管理
                            
用例管理
                            
配置管理
                        
                    
                    
 任务管理 
                        

                            
定时任务
                            
邮件设置
                            
任务监控
                            
查看报告
                        
                    
                
            
        
        
        
        

            
                
            
            
                
            
            
                
            
            
                
            
        
        
    



    

        

            

                
            

            

                

                    
                        John Doe
                        
                    
                    

                        
 Profile
                        

                            
                                50%
                                Settings
                            
                        
                        
Help
                        
 Log Out
                    
                

                

                    
                        
                        6
                    
                    

                        

                            
                                
                                
                          John Smith
                          3 mins ago
                        
                                
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        
                            
                        
                        

                            
                                
                                
                          John Smith
                          3 mins ago
                        
                                
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        
                            
                        
                        

                            
                                
                                
                          John Smith
                          3 mins ago
                        
                                
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        
                            
                        
                        

                            
                                
                                
                          John Smith
                          3 mins ago
                        
                                
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        
                            
                        
                        

                            

                                
                                    See All Alerts
                                    
                                
                            
                        
                    
                
            
        
    

页码展示代码

    

        
        

        
        

        
        

            
            

                

                     项目总计
                    
2500
                    4%  From last Week
                
                

                     模块总计
                    
123.50
                    3%  From last Week
                
                

                     接口总计
                    
2,500
                    34%  From last Week
                
                

                     用例总计
                    
4,567
                    12%  From last Week
                
                

                     配置总计
                    
2,315
                    34%  From last Week
                
                

                     今日新增用例
                    
7,325
                    34%  From last Week
                
            
            

            

                

                    


                        

                            

                                
日常自动化数据结果展示 
                            
                        
                    
                    

                        

                            

                                

                                    
UI每日巡检 在线
                                    

                                        

                                        
                                        

                                            
                                            

                                                
Settings 1
                                                
                                                
Settings 2
                                                
                                            
                                        
                                        

                                        
                                    
                                    

                                
                                

                                    
                                    

                                
                            
                        
                        

                            

                                

                                    
接口每日巡检 在线
                                    

                                        

                                        
                                        

                                            
                                            

                                                
Settings 1
                                                
                                                
Settings 2
                                                
                                            
                                        
                                        

                                        
                                    
                                    

                                
                                

                                    
                                    

                                
                            
                        

                    
                    


                    


                        

                            

                                

                                    

                                        

                                        

                                            

                                                
                                            
                                            
序号
                                            
测试人员
                                            
开始时间
                                            
结束时间
                                            
运行版本
                                            
系统版本
                                            
回归类型
                                            
成功数
                                            
失败数
                                            
跳过数
                                            
运行用例类名字
                                            
状态
                                            
用例描述
                                            
持续时间
                                            
日志
                                            

                                                当前选择 (   )