springboot+mybatisplus+layui+restful实现无刷新分页，带有多条件模糊查询

最新推荐文章于 2024-03-01 07:00:00 发布

Coding路人王

最新推荐文章于 2024-03-01 07:00:00 发布

阅读量859

点赞数 3

文章标签：列表 ajax easyui java javabean

本文链接：https://blog.csdn.net/wyn_365/article/details/107315617

版权

精选30+云产品，助力企业轻松上云！>>>

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分页配置类

package com.wang.springboot.sys.config;

import org.springframework.boot.autoconfigure.condition.ConditionalOnClass;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;

/**
 * @Author: 王一宁
 * @Date: 2019/11/23 19:16
 * 分页插件
 */
@Configuration
@ConditionalOnClass(value= {PaginationInterceptor.class})
public class MybatisPlusConfig {
    @Bean
    public PaginationInterceptor  paginationInterceptor() {
        return new PaginationInterceptor();
    }
}

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>