springboot+layui进行分页以及模糊查询
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">
<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;
});
后端
插件
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelper-spring-boot-starterartifactId>
<version>1.2.10version>
<exclusions>
<exclusion>
<groupId>org.mybatisgroupId>
<artifactId>mybatisartifactId>
exclusion>
exclusions>
dependency>
Mapper层
@Repository
@Mapper
public interface UserMapper extends BaseMapper<User> {
List<User> selectAll(User user);
}
<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;
}
}
效果展示
