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

后端部分

导入依赖

 <!-- mybatis的分页助手-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>

mapper.xml

<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>
<sql id="Base_Column_List">
    user_id, user_name, user_pwd, user_sex, user_age, create_time, update_time
    </sql>

mapper

 List<User> selectAll(User user);

Service层

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层 当User对象为空时，则为查询所有并分页，当User对象的属性不为空时，即为模糊查询并分页

@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);

前端

当页面初始化时，查询所有

layui.use(['form', 'table'], function() {   //**所有的function都在这里面写**
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table;
				console.log("执行到了表格")
		table.render({
					elem: '#currentTableId',
					url: 'http://localhost:8081/user/lists',
					method: 'get',
					page: true,
					response: {
						statusCode: 200, //规定成功的状态码，默认：0
					},
					parseData: function(res) { //res 即为原始返回的数据
						console.log(res);
						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'
				});

模糊查询

<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>

重载列表 进行模糊查询

// 监听搜索操作
				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;

					// layer.alert(result, {
					// 	title: '最终的搜索信息'
					// });
					console.log("执行到了重载")
					//执行搜索重载

					table.reload('currentTableId', {
						url: "http://localhost:8081/user/lists",
						method: "get",
						page: {
							curr: 1
						},
						where: user
					}, 'data');
					return false;
				});

其中where ：user 是要传给后端的数据

效果展示：