AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-11-09 417
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： springboot+mybatisplus+layui+restful实现无刷新分页，带有多条件模糊查询

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>


文章标签：
前端开发
数据格式
JSON
关键词：
MyBatis分页
Spring Boot mybatis-plus
Spring Boot分页
springboot Restful
springboot MyBatis分页
wyn-365
目录
相关文章
t2ssulhocemlc
|
3月前
|
SQL Java 数据库连接
MyBatis分页
MyBatis作为Java持久层框架，需结合数据库特性或插件实现分页。分页分为物理分页（如MySQL的LIMIT）和逻辑分页（内存截取），推荐使用PageHelper插件自动注入分页语句，提升开发效率与性能。需注意索引优化、深分页问题及多表关联时的兼容性，结合业务场景选择合适方案。
t2ssulhocemlc
154 4
Quan_Chen
|
9月前
|
SQL Java 数据库连接
微服务——MyBatis分页
本文介绍了分页的多种实现方式，包括自带RowBounds分页、第三方插件PageHelper分页、SQL分页、数组分页及拦截器分页。其中，RowBounds是先查询全部结果再内存分页；PageHelper通过修改SQL动态添加分页关键字；SQL分页依赖数据库自身的分页功能如`LIMIT`；数组分页则是查询全量数据后用`subList`方法截取；拦截器分页则统一在SQL后添加分页语句。最后总结逻辑分页适合小数据量，但大数据量易内存溢出；物理分页虽小数据量效率较低，但更适合大数据场景，优先推荐使用。
Quan_Chen
127 0
游客kufrkwrbkmpsa
|
9月前
|
SQL Oracle 关系型数据库
【YashanDB知识库】Mybatis-Plus调用YashanDB怎么设置分页
【YashanDB知识库】Mybatis-Plus调用YashanDB怎么设置分页
游客kufrkwrbkmpsa
99 0
蓝易云
|
7月前
|
SQL Java 数据安全/隐私保护
发现问题：Mybatis-plus的分页总数为0，分页功能失效，以及多租户插件的使用。
总的来说，使用 Mybatis-plus 确实可以极大地方便我们的开发，但也需要我们理解其工作原理，掌握如何合适地使用各种插件。分页插件和多租户插件是其中典型，它们的运用可以让我们的代码更为简洁、高效，理解和掌握好它们的用法对我们的开发过程有着极其重要的意义。
蓝易云
716 15
蓝易云
|
6月前
|
SQL Java 数据库
解决Java Spring Boot应用中MyBatis-Plus查询问题的策略。
保持技能更新是侦探的重要素质。定期回顾最佳实践和新技术。比如，定期查看MyBatis-Plus的更新和社区的最佳做法，这样才能不断提升查询效率和性能。
蓝易云
272 1
wanderInk
|
8月前
|
SQL 前端开发 Java
深入理解 Spring Boot 项目中的分页与排序功能
本文深入讲解了在Spring Boot项目中实现分页与排序功能的完整流程。通过实际案例，从Service层接口设计到Mapper层SQL动态生成，再到Controller层参数传递及前端页面交互，逐一剖析每个环节的核心逻辑与实现细节。重点包括分页计算、排序参数校验、动态SQL处理以及前后端联动，确保数据展示高效且安全。适合希望掌握分页排序实现原理的开发者参考学习。
wanderInk
535 4
游客f5gbkctaanby4
|
9月前
|
SQL Java 关系型数据库
MyBatis篇-分页
本文介绍了多种分页方式，包括自带rowbound内存分页、第三方插件pagehelper（通过修改SQL实现分页）、SQL分页（依赖limit或rownum等关键字）、数组分页（先查询全部数据再用subList分页）、拦截器分页（自定义拦截器为SQL添加分页语句）。最后总结了逻辑分页（内存分页，适合小数据量）和物理分页（直接在数据库层面分页，适合大数据量）的优缺点，强调物理分页优先于逻辑分页。
游客f5gbkctaanby4
423 0
大数据文摘
|
9月前
|
SQL Java 数据库连接
MyBatis 实现分页的机制
MyBatis 的分页机制主要依赖于 `RowBounds` 对象和分页插件。`RowBounds` 实现内存分页，适合小数据量场景，通过设定偏移量和限制条数对结果集进行筛选。而针对大数据量，则推荐使用分页插件（如 PageHelper），实现物理分页。插件通过拦截 SQL 执行，动态修改语句添加分页逻辑，支持多种数据库方言。配置插件后，无需手动调整查询方法即可完成分页操作，提升性能与灵活性。
大数据文摘
219 0
游客kufrkwrbkmpsa
|
9月前
|
Oracle 关系型数据库 Java
【YashanDB数据库】Mybatis-plus分页框架识别不到Yashandb
Mybatis-plus分页框架识别不到Yashandb
游客kufrkwrbkmpsa
205 0
二哥聊RPA
|
Java API 数据库
Springboot 实现 Restful 服务，基于 HTTP / JSON 传输
二哥聊RPA
19435 0

热门文章

最新文章

  • 1
    使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
  • 2
    spring+springMVC+mybatis的框架项目基础环境搭建
  • 3
    Spring-Boot + Mybatis 多数据源配置
  • 4
    mybatis-plus小技能： 分表策略（按年分表和按月分表）
  • 5
    深入浅出Mybatis系列（四）---配置详解之typeAliases别名（mybatis源码篇）
  • 6
    Mybatis快速入门--映射文件（一）（优化版）
  • 7
    Springboot集成 Sharding-JDBC + Mybatis-Plus实现分库分表（源码）
  • 8
    干翻Mybatis源码系列之第十篇：Mybatis拦截器基本开发、基本使用和基本细节分析
  • 9
    Spring Boot 2.X(五)：MyBatis 多数据源配置
  • 10
    求求你们了，MyBatis 批量插入别再乱用 foreach 了，5000 条数据花了 14 分钟
  • 1
    基于springboot+vue.js的民谣网站附带文章和源代码设计说明文档ppt
    89
  • 2
    基于springboot+vue.js的美妆购物网站附带文章和源代码设计说明文档ppt
    269
  • 3
    基于springboot+vue.js的疫情期间高校人员管理附带文章和源代码设计说明文档ppt
    88
  • 4
    基于springboot+vue.js的校园服务平台附带文章和源代码设计说明文档ppt
    172
  • 5
    基于springboot+vue.js的社区物业管理系统附带文章和源代码设计说明文档ppt
    236
  • 6
    基于springboot+vue.js的附绿城郑州爱心公益网站带文章和源代码设计说明文档ppt
    136
  • 7
    基于springboot+vue.js的汽车维修预约服务系统附带文章和源代码设计说明文档ppt
    254
  • 8
    基于springboot+vue.js的社团服务系统附带文章和源代码设计说明文档ppt
    83
  • 9
    基于springboot+vue.js的基于Web教师个人成果管理系统附带文章和源代码设计说明文档ppt
    186
  • 10
    基于springboot+vue.js的无人超市管理系统附带文章和源代码设计说明文档ppt
    272

    • 相关课程

    更多
  • 微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）
  • SpringBoot实战教程
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Springboot项目云开发快速迁移
  • MyBatis持久层框架入门

    • 相关电子书

    更多
  • Java Spring Boot开发实战系列课程【第6讲】：Spring Boot 2.0实战MyBatis与优化(Java面试题)
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    「直播预告」Streaming Lakehouse Meetup EP.2｜Paimon × StarRocks 共话实时湖仓