java实现layui分页前后端完整实例

  • A+
所属分类:java 编程

layui一直备受国内web开发者的喜欢。使用简单,样式也较为好看。本次说一下layui分页的实例,首先先引入layui,那是肯定的。

  • 效果:
    java实现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" onclick="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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • a a 0

      666