springboot+layui+pageHelper实现分页显示，多条件查询（IDEA简单详细）

亦凉 2021-08-13 15:47 876阅读 0赞

# 1.导入依赖 #

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.2.3.RELEASE</version>
            <relativePath/> 
        </parent>
        <groupId>com.dxf</groupId>
        <artifactId>admindemo</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>admindemo</name>
        <description>Demo project for Spring Boot</description>
    
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.58</version>
            </dependency>
    
    
            
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>1.2.10</version>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis</artifactId>
                <version>3.5.3</version>
            </dependency>
            
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>1.3.2</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-core</artifactId>
                <version>1.3.7</version>
            </dependency>
    
    
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
                <exclusions>
                    <exclusion>
                        <groupId>org.junit.vintage</groupId>
                        <artifactId>junit-vintage-engine</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
    
                
                <plugin>
                    <groupId>org.mybatis.generator</groupId>
                    <artifactId>mybatis-generator-maven-plugin</artifactId>
                    <version>1.3.7</version>
                </plugin>
            </plugins>
        </build>
    
    </project>

# 2.配置文件 #

#添加项目名
    server.servlet.context-path=/adminDemo
    
    #禁用缓存，ctrl+F9重新编译网页更改
    spring.thymeleaf.cache=false
    
    #数据库连接信息（useUnicode=true&characterEncoding=UTF-8不加中文查询不到）
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.datasource.password=root
    spring.datasource.username=root
    spring.datasource.url=jdbc:mysql://127.0.0.1:3306/exam?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
    
    #配置mybatis
    #别名扫描包
    mybatis.type-aliases-package=com.dxf.admindemo.pojo
    mybatis.mapper-locations=classpath:mapper/*Mapper.xml #日志显示SQL的执行情况 logging.level.com.dxf.admindemo.mapper:debug

# 3.前端显示 #

table.render({ 
                elem: '#currentTableId',
                url: '[[@{/}]]system/tableData',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', { 
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
    
                cols: [
                    [
                    { type: "checkbox", width: 50, fixed: "left"},
                    { field: 'uId', width: 130, title: 'ID', sort: true},
                    { field: 'uName', width: 130, title: '用户名'},
                    { field: 'sex', width: 80, title: '性别', sort: true},
                    { field: 'password', width: 130, title: '密码'},
                    { field: 'scale', title: '权限等级', minWidth: 150},
                    { field: 'loginstatus', width: 80, title: '状态', sort: true},
                    { field: 'cId', width: 80, title: '班级', sort: true},
                    { title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
                ]
                ],
                limits: [5, 10, 15, 20, 50, 100],
                limit: 5,
                page: true
            });
    
            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) { 
                var result = JSON.stringify(data.field);
                layer.alert(result, { 
                    title: '最终的搜索信息'
                });
    
                //执行搜索重载
                table.reload('currentTableId', { 
                    page: { 
                        curr: 1
                    }
                    , where: { 
                        searchUser: result
                    }
                }, 'data');
    
                return false;
            });

# 4.后台处理 #

@RequestMapping("/tableData")
        @ResponseBody
        public JSONObject tableData(int page,int limit,@RequestParam(name = "searchUser", required = false) String searchUser){ 
            UserExample userExample=new UserExample();
            if (searchUser!=null){ 
                User user = JSONObject.parseObject(searchUser, User.class);
                System.out.println(user);
                UserExample.Criteria criteria =  userExample.createCriteria();
                if (user.getSex()!=null && user.getSex().length()!=0){ 
                    criteria.andSexEqualTo(user.getSex());
                }
                if (user.getuName()!=null && user.getuName().length()!=0){ 
                    criteria.andUNameLike("%" + user.getuName() + "%");
                }
                if (user.getScale()!=null){ 
                    criteria.andScaleEqualTo(user.getScale());
                }
                if (user.getcId()!=null){ 
                    criteria.andCIdEqualTo(user.getcId());
                }
            }
    
            //查询之前调用，传入页码，以及每页数量
            PageHelper.startPage(page, limit);
            //startPage后面紧跟的查询是分页查询
            List<User> users = systemServiceImpl.selectByExample(userExample);
            //用PageInfo对结果进行包装,传入连续显示的页数
            PageInfo pageInfo = new PageInfo(users,limit);
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("code", 0);
            jsonObject.put("msg", "");
            jsonObject.put("count", pageInfo.getTotal());
            jsonObject.put("data", pageInfo.getList());
            return jsonObject;
        }