pagehelper分页操作

Posted 2021-02-21 zhuchengbo

一、后端
二、前端

一、后端

1、导入依赖

<!-- pagehelper分页 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

2、pojo层

3、dao层

mapper

List<FP2_T_Schedulejoblog> selectfp2Tschedulejoblog(Integer pageNum, Integer pageSize);

mapper.xml

<select id="selectfp2TscheduleJobLog" resultMap="FP2_T_SchedulejoblogMap">
    SELECT *
    FROM FP2_T_SCHEDULEJOBLOG order by LOG_ID desc
  </select>

4、service层

service

PageInfo<FP2_T_Schedulejoblog> selectfp2Tschedulejoblog(Integer pageNum, Integer pageSize);

serviceImpl

@Override
    public PageInfo<FP2_T_Schedulejoblog> selectfp2Tschedulejoblog(Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum , pageSize);
        List<FP2_T_Schedulejoblog> list = fP2_T_SchedulejoblogMapper.selectfp2Tschedulejoblog(pageNum,pageSize);
        PageInfo<FP2_T_Schedulejoblog> personPageInfo = new PageInfo<>(list);
        //将结果存入map进行传送
        return personPageInfo;
    }

5、controller层

@GetMapping("/pageselectJobLog")
    public String pageselectJobLog(Model model,@RequestParam(required=true,value="pageNum",defaultValue="0") Integer pageNum,
                                @RequestParam(required=true,value="pageSize",defaultValue="5") Integer pageSize) {
        PageInfo<FP2_T_Schedulejoblog> jobss  = fP2_T_SchedulejoblogServiceImpl.selectfp2Tschedulejoblog(pageNum,pageSize);
        /*model.addAttribute("rolename",record.getAppName());*/
        model.addAttribute("jobslog", jobss.getList() );
        //当前页
        model.addAttribute("pageNum",jobss.getPageNum());
        //每页条数
        model.addAttribute("pageSize",jobss.getPageSize());
        //总数据量
        model.addAttribute("total",jobss.getTotal());
        //System.out.println(jobss.size());
        return "log_list";
    }

二、前端

1、导入layUI模板

<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>  

2、导航栏

（Layui）或者

<div class="pagination pagination-centered" id="pagediv">
                    </div>

bootstrap)

 <div class="box">
                        <div id="pagediv" class="page center">
                        </div>
                    </div>

或者

3、java script

<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use([‘laypage‘, ‘layer‘], function(){
        var laypage = layui.laypage
            ,layer=layui.layer;
        laypage.render({
            elem: ‘pagediv‘, //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div
            count: /*[[${total}]]*/ 1, //数据总数
            skip:true,
            limit: /*[[${pageSize}]]*/ 1,
            groups:5,
            first:‘首页‘,
            curr: /*[[${pageNum}]]*/ 1, //获取起始页

            jump: function(obj, first){ //触发分页后的回调
                if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                    self.location.href=("/joblog/pageselectJobLog?pageNum="+obj.curr);
                    //list(obj.curr);
                }

            }
        });
    });
    /*]]>*/
</script>