SpringBoot+Mybatis+PageHelper+bootstrapTable 实现分页

最新推荐文章于 2024-07-18 17:40:10 发布

潘多编程

最新推荐文章于 2024-07-18 17:40:10 发布

阅读量543

点赞数

分类专栏： SpringBoot mybatis

本文链接：https://blog.csdn.net/h356363/article/details/110988041

版权

SpringBoot 同时被 2 个专栏收录

47 篇文章 11 订阅

订阅专栏

mybatis

5 篇文章 0 订阅

订阅专栏

pom 文件集成 SpringBoot+Mybatis+PageHelper

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>xsz</groupId>
    <artifactId>springbootMybatis</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
                        <version>8.0.15</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.1</version>
        </dependency>

        <!--pagehelper 分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>

    </dependencies>

</project>

entity 实体类

package com.xsz.model;

public class ResourceData {
    private Integer id;

    private String content;

    private String type;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }
}

Controller

 @RequestMapping("allresourcepage")
    @ResponseBody
    public  Map<String, Object> getAll2(QueryRequest queryRequest){
        /**
         *  PageHelper.startPage(1, 3);
         *  第一个参数表示页码，就是第几页。 从1开始
         *  第二个参数表示，一页显示多少行数据
         */
        PageHelper.startPage(queryRequest.getPageNum(), queryRequest.getPageSize());
        List<ResourceData> list= resourceRepository.selectAll();
        PageInfo<ResourceData> pageInfo = new PageInfo<ResourceData>(list);
        Map<String, Object> rspData = new HashMap<>();
        rspData.put("rows", pageInfo.getList());
        rspData.put("total", pageInfo.getTotal());
        return  rspData;
    }

工具类 QueryRequest

package com.xsz.util;

public class QueryRequest {
    private int pageSize;
    private int pageNum;

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="roleTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
</body>
<script>

    $('#roleTable').bootstrapTable({
    method: 'get', // 服务器数据的请求方式 get or post
    url: "/mybatis/allresourcepage", // 服务器数据的加载地址
    pagination: true, //是否显示分页（*）
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
    pageSize: 5, //每页的记录行数（*）
    pageList: [5, 25, 50, 100], //可供选择的每页的行数（*）
    queryParams: function(params) {
        return {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1
        };
    },
    columns: [{
        checkbox: true
    },{
        field: 'id',
        title: '资料ID'
    },{
        field: 'type',
        title: '资料类型'
    }, {
        field: 'content',
        title: '内容'
    }
    ]
});
</script>
</html>

页面效果

继续实现搜索功能

controller

@RequestMapping("pagelist")
    @ResponseBody
    public  Map<String, Object> getAll3(QueryRequest queryRequest,ResourceData resourceData){
        /**
         *  PageHelper.startPage(1, 3);
         *  第一个参数表示页码，就是第几页。 从1开始
         *  第二个参数表示，一页显示多少行数据
         */
        System.out.println("后台接收到的资料类型="+resourceData.getType());
        PageHelper.startPage(queryRequest.getPageNum(), queryRequest.getPageSize());
        List<ResourceData> list=null;
        if(resourceData.getType()!=""){
            list= resourceRepository.selectByType(resourceData.getType());
        }else{
            list= resourceRepository.selectAll();
        }

        PageInfo<ResourceData> pageInfo = new PageInfo<ResourceData>(list);
        Map<String, Object> rspData = new HashMap<>();
        rspData.put("rows", pageInfo.getList());
        rspData.put("total", pageInfo.getTotal());
        return  rspData;
    }

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<form class="form">
    <div class="row">
        <div class="col">
            <div class="input-group">
                <span class="input-group-addon">类型：</span>
                <div class="form-group">
                    <input type="text" name="type" class="form-control">
                </div>
            </div>
        </div>
        <div class="col"></div>
        <div class="col">
            <button type="button" class="btn btn-success" onclick="refresh()">重置</button>
            <button type="button" class="btn btn-primary" onclick="search()">搜索</button>
        </div>
    </div>
</form>
<table id="roleTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
</body>
<script>

    $('#roleTable').bootstrapTable({
    method: 'get', // 服务器数据的请求方式 get or post
    url: "/mybatis/pagelist", // 服务器数据的加载地址
    pagination: true, //是否显示分页（*）
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
    pageSize: 5, //每页的记录行数（*）
    pageList: [5, 25, 50, 100], //可供选择的每页的行数（*）
    queryParams: function(params) {
        return {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1,
            type: $(".form").find("input[name='type']").val().trim()
        };
    },
    columns: [{
        checkbox: true
    },{
        field: 'id',
        title: '资料ID'
    },{
        field: 'type',
        title: '资料类型'
    }, {
        field: 'content',
        title: '内容'
    }
    ]
});

// 搜索方法
function search() {
    $('#roleTable').bootstrapTable('refresh');
}
// 重置方法
function refresh() {
    $(".form")[0].reset();
    search();
}
</script>
</html>