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

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

  • 效果:
    Hellohao图床
  • 引入一个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
本文由 Hellohao 作者:hellohao 发表,其版权均为 Hellohao 所有,文章内容系作者个人观点,不代表 Hellohao 对观点赞同或支持。如需转载,请注明文章来源。
0

评论:

1 条评论,访客:1 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

发表评论