Layui列表分页功能前后台实现（傻瓜式教程）

Layui列表分页功能前后台实现
layui一直备受国内web开发者的喜欢。使用简单，样式也较为好看。本次说一下layui分页的实例，首先先引入layui，那是肯定的。
效果图：

引入一个maven依赖：
pagehelper这个插件很方便，让我们写分页sql时只写查询就行。自动封装分页的一些sql，如：自动增加imit，自动count总数等。

<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.10</version>
        </dependency>

前端页面：
很简单，写一个table标签就行.
需要注意的是：我在script标签中加入了th:inline=“none”,这里说明一下，由于我的项目是SpringBoot项目，用的模板引擎是thymeleaf所以加上th:inline=“none” 就代表此区域不使用thymeleaf表达式。因为[[]]符号会冲突。没有使用的不用添加，会报错。

<table id="dates" lay-filter="test"></table>

<script type="text/javascript" th:inline="none">
    layui.use('table', function(){
    var table = layui.table;
                table.render({
            elem: '#dates'
            ,url:'/admin/selectusertable'
            ,limit:5 //默认为10
            ,cols: [[
                {field:'id', width:50, title: '编号', sort: true} //sort：true页面可进行排序操作
                ,{field:'username',  title: '用户名'}
                ,{field:'email',width:170,  title: '邮箱', sort: true}
                ,{field:'password',width:170,  title: '密码'}
                ,{field:'birthder',width:170,  title: '注册时间'}
                ,{field:'level',width:100,  title: '等级',templet: function(d){
                    var str = '';
                    if(d.level==1){str='普通用户';}
                    else if(d.level==2){str='管理员';}
                        return str;
                    }
                    }
                ,{field:'level',width:100,  title: '操作',templet: function(d){
                        return '<a class="layui-btn layui-btn-xs layui-btn-danger" οnclick="dele('+d.id+');">删除</a>';
                    }
                }
            ]]
            ,page: true
            ,done:function(res, curr, count){
                //数据的回调用，可不写
            }
        });
    });
</script>

接下来时Controller实现：

        //获取用户信息列表
    @RequestMapping(value = "/selectusertable2")
    @ResponseBody
    public Map<String,Object>selectByFy12(HttpSession session, @RequestParam(required=false,defaultValue="1") int page,
                                          @RequestParam(required=false) int limit) {
        // 使用Pagehelper传入当前页数和页面显示条数会自动为我们的select语句加上limit查询
        // 从他的下一条sql开始分页
        PageHelper.startPage(page, limit);
        List<User> users  = userService.getuserlist();// 这是我们的sql
            // 使用pageInfo包装查询
        PageInfo<User> rolePageInfo = new PageInfo<>(users);//
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("code",0);
        map.put("msg","");
        map.put("count",rolePageInfo.getTotal());
        map.put("data",rolePageInfo.getList());
        return map;
    }

SQL语句：
什么都不用加，直接写查询就行，插件会自动帮你做limit或者count

 SELECT * FROM user order by birthder desc