1.之前在做分页的时候，都是采用mybatis+papehelper发送网络请求，需要写大量的分页代码，后台还需要写分页的工具类。这里我才用一种全新的restful风格+layui的分页形式，不仅不用写分页工具类，不用写大量请求，不用写前端分页，还不用发送链接请求！！！
2.使用教学：首先在layui官网拿下layui的js+css文件，我们以动态数据表为例。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="/layui/css/layui.css" media="all"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="/layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' //数据接口 ,page: true //开启分页 ,cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: '用户名', width:80} ,{field: 'sex', title: '性别', width:80, sort: true} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177} ,{field: 'experience', title: '积分', width: 80, sort: true} ,{field: 'score', title: '评分', width: 80, sort: true} ,{field: 'classify', title: '职业', width: 80} ,{field: 'wealth', title: '财富', width: 135, sort: true} ]] }); }); </script> </body> </html>
3.MybatisplusConfig.java分页配置类
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="/layui/css/layui.css" media="all"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="/layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' //数据接口 ,page: true //开启分页 ,cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: '用户名', width:80} ,{field: 'sex', title: '性别', width:80, sort: true} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177} ,{field: 'experience', title: '积分', width: 80, sort: true} ,{field: 'score', title: '评分', width: 80, sort: true} ,{field: 'classify', title: '职业', width: 80} ,{field: 'wealth', title: '财富', width: 135, sort: true} ]] }); }); </script> </body> </html>
4.News.java实体类
package com.wang.springboot.sys.domain; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import lombok.EqualsAndHashCode; import lombok.ToString; import lombok.experimental.Accessors; import java.io.Serializable; import java.util.Date; /** * @author 王一宁 * @date 2020/3/19 9:17 */ @Data @EqualsAndHashCode(callSuper = false) @Accessors(chain = true) @TableName("sys_news") @ToString public class News implements Serializable { private static final long serialVersionUID=1L; @TableId(value = "id", type = IdType.AUTO) private Integer id; private String title; private Date newstime; private String content; }
5.NewsVo.java 用来补充封装中间数据
package com.wang.springboot.sys.vo; import com.wang.springboot.sys.domain.News; import lombok.Data; import lombok.EqualsAndHashCode; /** * @author 王一宁 * @date 2020/3/19 9:24 */ @Data @EqualsAndHashCode(callSuper = false) public class NewsVo extends News { private Integer page=1; private Integer limit=10; @DateTimeFormat(pattern = "yyyy-MM-dd") private Date startDate; @DateTimeFormat(pattern = "yyyy-MM-dd") private Date endDate; }
6.DataGridView.java 用来返回json数据的实体
package com.wang.springboot.sys.common; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; /** * @author 王一宁 * @date 2020/3/17 13:07 * json数据实体 */ @Data @AllArgsConstructor @NoArgsConstructor public class DataGridView { private Integer code = 0; private String msg = ""; private Long count = 0L; private Object data; public DataGridView(Long count, Object data) { this.count = count; this.data = data; } public DataGridView(Object data) { this.data = data; } }
7.NewsController.java
package com.wang.springboot.sys.controller; import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.wang.springboot.sys.common.DataGridView; import com.wang.springboot.sys.common.ResultObj; import com.wang.springboot.sys.domain.Dept; import com.wang.springboot.sys.domain.News; import com.wang.springboot.sys.service.NewsService; import com.wang.springboot.sys.vo.NewsVo; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * @author 王一宁 * @date 2020/3/19 9:25 */ @RestController @RequestMapping("news") public class NewsController { @Autowired private NewsService newsService; @RequestMapping("listNews") public DataGridView listNews(NewsVo newsVo){ //分页显示 IPage<News> page = new Page<>(newsVo.getPage(),newsVo.getLimit()); //模糊查询 QueryWrapper<News> queryWrapper = new QueryWrapper<>(); //查询时间的条件 下面为一个时间区间，也可以再添加别的条件 queryWrapper.ge(newsVo.getStartDate()!=null,"newstime",newsVo.getStartDate()); queryWrapper.le(newsVo.getEndDate()!=null,"newstime",newsVo.getEndDate()); //按照时间倒叙 queryWrapper.orderByDesc("newstime"); //查询数据 newsService.page(page,queryWrapper); return new DataGridView(page.getTotal(),page.getRecords()); } }
8.NewsService.java
/** * @author 王一宁 * @date 2020/3/19 9:31 */ public interface NewsService extends IService<News> { }
9.NewsServiceImpl.java
/** * @author 王一宁 * @date 2020/3/19 9:31 */ @Service @Transactional public class NewsServiceImpl extends ServiceImpl<NewsMapper, News> implements NewsService { }
9.NewsMapper.java
/** * @author 王一宁 * @date 2020/3/19 9:34 */ @Mapper public interface NewsMapper extends BaseMapper<News> { }
10.前端测试页面，我用的layui的动态数据表
<link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all" /> <!--表格容器--> <table class="layui-table" lay-data="{height:315, url:'/news/listNews', page:true, id:'test'}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'id', width:80, sort: true}">ID</th> <th lay-data="{field:'title', width:300}">标题</th> <th lay-data="{field:'content', width:700, sort: true}">内容</th> </tr> </thead> </table> <script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
11.比较全面的页面，如【表】【搜索框】【时间框】【下拉框追加数据】
<!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>首页--工作台</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all" /> <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all" /> </head> <body class="childrenBody"> <!--表单开始--> <form class="layui-form" id="searchFrm" method="post" action=""> <!--搜索框--> <div class="layui-inline"> <label class="layui-form-label">按开始日期</label> <div class="layui-input-inline"> <input type="text" name="startDate" id="startDate" placeholder="yyyy-MM-dd" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">按结束日期</label> <div class="layui-input-inline"> <input type="text" name="endDate" id="endDate" placeholder="yyyy-MM-dd" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">单选下拉框</label> <div class="layui-input-inline"> <select name="typeid" id="search_typeid"> <option value="1">请选择</option> </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> <button type="button" class="layui-btn layui-btn-primary">添加</button> </div> </div> </form> <!--表格容器--> <table id="demo" lay-filter="test"></table> <!--表格容器结束--> <script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script> <script type="text/javascript"> //加载layui layui.use(['form','element','layer','jquery','table'],function(){ var form = layui.form, $ = layui.jquery; var table = layui.table; //第一个实例 var tableIns = table.render({ elem: '#demo' ,height: 312 ,url: '/news/listNews' //数据接口 ,page: true //开启分页 ,cols: [ [ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'title', title: '用户名', width:80} ,{field: 'content', title: '性别', width:80, sort: true} ] ] }); //获取到 初始化下拉查询列表的内容【这一部分的后台我没有展示】 $.get("/type/loadAllType",function (objs) { var types = objs.data; var search_typeid = $("#search_typeid"); $.each(types,function (index,item) { //追加数据 search_typeid.append("<potion value="+item.id+">"+item.name+"</potion>"); }); //重新渲染 form.render("select"); }); //模糊查询 form.on("submit(doSearch)",function (data) { //ajax方式发送数据 $.post("/news/listNews",data.field,function () { tableIns.reload({ url:'/news/listNews', where:data.field }); return false; }); }); }); </script> </body> </html>
