PageHelper分页小结-前后台交互

PageHelper分页小结-前后台交互

1.jar包导入及配置

1）如果是maven 项目

pom.xml里先添加依赖<dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>4.1.6</version>
</dependency>

在mybatis-configure里加入

2）非maven 项目

导入pagehelper-4.0.2 .jar 并且需要导入它的依赖jsqlparser-0.9.5 .jar 否则会报错。

2.后台处理

 PageHelper.startPage(pageNum, pageSize);   //设置传入页码，以及每页的大小

 List <User> data= userService.getAll();//此data已经是分页之后的数据

  PageInfo info = new PageInfo(data,pageSize);  

   //使用pageInfo来包装查询后的结果，只需要将pageInfo交给页面就行了

   new ModelandView().addObject("pageinfo",info); //把封装好的pageinfo属性设置modelandview中

3.前台处理

Vue 里的分页(element-ui)，直接用

...

利用bootstrap框架的分页组件(bootstrap-paginator)

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-paginator.js"></script>

HTML页面里加入div 元素 ，再放入ul标签， id为fenye

<div>   
    <ul id='fenye'></ul>
</div>

<script type="text/javascript">
    var element = $("#fenye");
    pageStart();
    function pageStart(){

                var options = {
                    bootstrapMajorVersion:3, //bootstrap的版本要求
                    currentPage:${data.pageNum},//当前页数,可以去从后台获取
                    totalPages:${data.pages},//总页数,可以去从后台获取
                    numberOfPages:3,//每页记录数
                    itemTexts : function(type, page, current) {//设置分页按钮显示字体样式
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked:function(event,originalEvent,type,page){
                       );
                        //分页按钮点击事件


                        $.ajax({//根据page去后台加载数据
                            url:"你要去的地址",
                            type:"get",
                            dataType:"json",
                            data:{"pageNum":page},
                            cache:false,
                            success:function(res){
                             
                                console.log(res.data);

                            }
                        })
                    }
                }
                //初始化分页框
                element.bootstrapPaginator(options);
            }


</script>