laypage 分页实例前后台(springboot+mybatis)

1.引入js，js包的版本不要弄太高了，不然出不来效果
2.后台分页
controller层

   /**
     * @param pageIndex 当前页
     * @param pageSize  每页显示多少条数据
     *  total 总页数
     * */
    @RequestMapping(value = "/hhhhhhh")
    @ResponseBody
    public Map<String, Object> user(@RequestParam(value = "pageIndex", defaultValue = "1") Integer pageIndex,
                                    @RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize) {
        System.out.println("当前页" + pageIndex+"每页数据："+pageSize);
        //获取分页数据
        List<UserEntity> userList = this.loginService.selectUsers((pageIndex - 1) * pageSize, pageSize);
        Map<String, Object> data = new HashMap<String, Object>();
        //获取总条数
        int rowSize = this.loginService.selectUsersTotal();
        data.put("total", (rowSize - 1) / pageSize + 1);
        data.put("pageIndex", pageIndex);
        data.put("data", userList);
        return data;
    }

3.xml

    <select id="selectUsers" resultType="com.kx.printshopweb.entity.UserEntity">
       select * from user s where 1 = 1 limit #{pageIndex},#{pageSize}
    </select>

    <select id="selectUserTotal" resultType="int">
        select count(1) from user s
    </select>

4.jsp页面

<script src="../static/js/jquery-1.12.0.js"></script>
<link href="../static/css/layer.min.css" rel="stylesheet">
<script src="../static/js/layer.min.js"></script>
<script src="../static/js/laypage/laypage.js"></script>
<div id="dataTable"  ></div>
<div id="paperTable"  ></div>

<script>
    var pageTotal = 100;
    $(function(){
        show(1);
    })
  //渲染数据
    function show(pageIndex){
        var total = 0;
        $.ajax({
            type:'post',
            url: "/login/hhhhhhh",
            dataType:"json",
            async:false,
            data:{
                "pageIndex":pageIndex,
                "pageSize":2
            },
            success:function(data){
                total = data.total;
               laypage({
                    cont: 'paperTable', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                    pages: total, //通过后台拿到的总页数
                    curr:  data.pageIndex, //当前页
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            console.log(data.pageIndex)
                            show(obj.curr);
                         }
                    }
                });
                var table = ""
                for(var i = 0; i < data.data.length; i++){
                    table+=
                        " <p>第"+"--"+pageIndex+"页--"+ data.data[i].userName +"</p>"+
                        "<hr>";
                    $("#dataTable").html(table);
                }

            }
        });
 }
</script>

效果图