springboot+layui进行分页以及模糊查询

springboot+layui进行分页以及模糊查询

前端

html部分
搜索部分

<fieldset class="table-search-fieldset">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="">
							<div class="layui-form-item">

								<div class="layui-inline">
									<label class="layui-form-label">用户姓名</label>
									<div class="layui-input-inline">
										<input type="text" name="userName" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">年龄</label>
									<div class="layui-input-inline">
										<input type="text" name="userAge" autocomplete="off" class="layui-input">

									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">性别</label>
									<div class="layui-input-inline">
										<!-- <input type="text" name="userSex" autocomplete="off" class="layui-input"> -->
										<select name="userSex" style="width: 100px;">
											<option value="">请选择性别</option>
											<option value="男">男</option>
											<option value="女">女</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<button lay-submit lay-filter="data-search-btn"
										class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜 索</button>
									<!--  -->

								</div>
							</div>
						</form>
					</div>
				</fieldset>

数据表格

<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

js部分
数据表格渲染

layui.use(['form', 'table'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table;
				console.log("执行到了表格")

				table.render({
					elem: '#currentTableId',
					headers: {
						"Authorization": localStorage.token
					},
					url: 'http://127.0.0.1:8081/user/lists',
					method: 'get',
					xhrFields: {
					                    withCredentials: true
					                },
					page: true,
					response: {
						statusCode:200, //规定成功的状态码，默认：0
					},
					parseData: function(res) { //res 即为原始返回的数据
					console.log(res);
					
					if(res.code != 200){
						return {
							"code": res.code, //解析接口状态
							"msg": res.msg, //解析提示文本
							
						};
					}else{
						return {
							"code": res.code, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.data.total, //解析数据长度
							"data": res.data.list //解析数据列表
						};
					}
						
					},
					toolbar: '#toolbarDemo',
					defaultToolbar: ['filter', 'exports', 'print', {
						title: '提示',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips'
					}],

					cols: [
						[{
								type: "checkbox",
								width: 50
							},
							{
								field: 'userId',
								width: 80,
								title: 'ID',
								sort: true
							},
							{
								field: 'userName',
								width: 80,
								title: '用户名'
							},
							{
								field: 'userPwd',
								width: 80,
								title: '密码'
							},
							{
								field: 'userAge',
								width: 80,
								title: '年龄'
							},
							{
								field: 'userSex',
								title: '性别',
								minWidth: 150
							},
							{
								field: 'createTime',
								title: '创建时间',
								minWidth: 150
							},
							{
								field: 'updateTime',
								title: '更新时间',
								minWidth: 150
							},
							{
								title: '操作',
								minWidth: 150,
								toolbar: '#currentTableBar',
								align: "center"
							}
						]
					],
					limits: [10, 15, 20, 25, 50, 100],
					limit: 15,
					page: true,
					skin: 'line'
				});

数据表格模糊搜索重载

form.on('submit(data-search-btn)', function(data) {
					var result = JSON.stringify(data.field);
					var user = {};
					user.userName = data.field.userName
					user.userAge = data.field.userAge;
					user.userSex = data.field.userSex;

				
					console.log("执行到了重载")
					//执行搜索重载
					table.reload('currentTableId', {
						url: "http://localhost:8081/user/lists",
						method: "get",
						page: {
							curr: 1    //重新以第一页开始渲染
						},
						where: user
					}, 'data');
					return false;
				});

后端

插件

 <!-- mybatis的分页助手-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.10</version>
            <exclusions>    <!--排除与mybatis-plus的冲突否则报错-->
                <exclusion>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis</artifactId>
                </exclusion>
            </exclusions>

        </dependency>

Mapper层

@Repository
@Mapper
public interface UserMapper extends BaseMapper<User> {

    List<User> selectAll(User user);
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zzuli.mapper.UserMapper">
    <sql id="Base_Column_List">
    user_id, user_name, user_pwd, user_sex, user_age, create_time, update_time,phone,email
    </sql>
    <select id="selectAll" resultType="com.zzuli.entity.User">
        select <include refid="Base_Column_List"/> from user
        <where>
            <if test="userName != null and userName != ''">
                user_name like '%${userName}%'
            </if>
            <if test="userAge != null and userAge != 0">
                and user_age  = #{userAge}
            </if>
            <if test="userSex != null and userSex != ''">
                and user_sex  = #{userSex}
            </if>
        </where>
    </select>


</mapper>

service层

 @Override
    public List<User> selectAll(User user) {
        return userMapper.selectAll(user);
    }

    public Map<String, Object> selectAll(Integer pageNum, Integer pageSize, User user){
        //通过PageHelper对象设定分页参数
        PageHelper.startPage(pageNum, pageSize);
        //当前页面的数据
        List<User> list = userMapper.selectAll(user);
        //创建PageInfo对象，并将当前页面数据传入，计算分页相关数据
        PageInfo<User> pageInfo = new PageInfo<>(list);
        long total = pageInfo.getTotal();
        Map<String, Object> map = new HashMap<>();
        //本页数据
        map.put("list", list);
        //总数据条目
        map.put("total", total);
        return map;

    }

Controller层

//    分页以及模糊查询
    @RequiresPermissions("sys:user:list")
    @GetMapping("/lists")
    public Result lists (int page,
                          int limit,
                         User user) {
            System.out.println(user);
            Map<String, Object> data = userService.selectAll(page, limit, user);

            return Result.succ(200, "查询成功", data);
    }

Result结果封装类

package com.zzuli.common.lang;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result implements Serializable {       //成功主要看数据
    private int code;  //200为正常                   //失败主要看信息
    private int count;
    private String msg;
    private Object data;

//    工具类
    public static Result succ (int code, String msg, Object data,Integer count){
        Result r = new Result();
        r.setCode(code);
        r.setMsg(msg);
        r.setData(data);
        r.setCount(count);
        return r;
    }
    public static Result succ (int code, String msg, Object data){
        Result r = new Result();
        r.setCode(code);
        r.setMsg(msg);
        r.setData(data);
        return r;
    }
//    再封装一层
    public static Result succ(Object data){
        return succ(200,"操作成功！",data);
    }
    public static Result succ(Object data,Integer count){
        return succ(200,"操作成功！",data,count);
    }

    public static Result fail (String msg){
        return fail(msg,null);
    }

    public static Result fail (String msg, Object data){
        return fail(400,msg,data);
    }

    public static Result fail (int code, String msg, Object data){
        Result r = new Result();
        r.setCode(code);
        r.setMsg(msg);
        r.setData(data);
        return r;
    }
}

效果展示