SpringBoot+Mybatis实现后台分页

最新推荐文章于 2025-06-10 09:48:50 发布

团子.

最新推荐文章于 2025-06-10 09:48:50 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： SpringBoot 文章标签： SpringBoot+Mybatis实现后台分页

本文链接：https://blog.youkuaiyun.com/weixin_42370891/article/details/84930667

SpringBoot 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用SpringBoot结合Mybatis实现后台分页功能，包括引入分页插件、Controller、Service、Mapper层的实现，以及前端页面和JS代码的配合，最后展示数据库表结构和运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpringBoot+Mybatis实现后台分页

1.首先我们新建一个springboot工程
在pom.xml中引用分页插件，千万不要引用错了。

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

2.Controller层

package com.springboot.controller;

import com.github.pagehelper.PageInfo;
import com.springboot.beans.HttpResponseEntity;
import com.springboot.service.PageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
public class PageController {
    @Autowired
    private PageService pageService;

    @PostMapping(value = "/selectAll", headers = "Accept=application/json")
    public HttpResponseEntity selectAll(@RequestBody PageInfo pageInfo) {
        return pageService.selectAll(pageInfo);
    }
}

3.Service层

package com.springboot.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.springboot.beans.HttpResponseEntity;
import com.springboot.dao.PageMapper;
import com.springboot.dao.entity.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;


@Service
public class PageService {
@Autowired
    private PageMapper pageMapper;
    public HttpResponseEntity selectAll(PageInfo pageInfo) {
        PageHelper.startPage(pageInfo.getPageNum(), pageInfo.getPageSize());
        Page page = new Page();
        List<Page> list = pageMapper.selectAll(page);
        PageInfo pageInfo1 = new PageInfo(list);
        return HttpResponseEntity.createBySuccessData(pageInfo1);
    }
}

4.Mapper

List<Page> selectAll(Page record);

5.xml

<select id="selectAll" parameterType="com.springboot.dao.entity.Page"  resultMap="BaseResultMap">
    select
    *
    from page
  </select>

6.前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="bootstrap-table-develop/dist/bootstrap-table.min.css" >
    <script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-table-develop/dist/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
</head>


<body>
<div>
    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
<table id="userTable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" >
</table>
</div>
</body>
</html>

7.js（这里用到的是bootstrap-table）

 $(function () {
        //初始化表格
        var oTable = new TableInit();
        oTable.Init();
    });

    function TableInit() {

        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#userTable').bootstrapTable({
                url: 'http://localhost:8080/selectAll',         //请求后台的URL（*）
                method: 'POST',                      //请求方式（*）
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                sortOrder: "asc",                   //排序方式
                queryParamsType: '',
                dataType: 'json',
                paginationShowPageGo: true,
                showJumpto: true,
                pageNumber: 1, //初始化加载第一页，默认第一页
                queryParams: queryParams,//请求服务器时所传的参数
                sidePagination: 'server',//指定服务器端分页
                pageSize: 4,//单页记录数
                pageList: [4, 10, 15, 20],//分页步进值
                search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                silent: true,
                showRefresh: true,                  //是否显示刷新按钮
                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                clickToSelect: true,                //是否启用点击选中行
                showColumns: true,                  //是否显示所有的列
                cardView: false,                    //是否显示详细视图
                minimumCountColumns: 2,             //最少允许的列数
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列

                columns: [{
                    checkbox: true
                    // visible: false
                }, {
                    field: 'id',
                    title: '序号',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                    {
                        field: 'name',
                        title: '姓名',
                        align: 'center',
                        width: '230px'
                    },
                    {
                        field: 'sex',
                        title: '性别',
                        align: 'center',
                        width: '230px'
                    },
                    {
                        field: 'age',
                        title: '年龄',
                        align: 'center',
                        width: '230px'
                    },
                    {
                        field: 'address',
                        title: '地址',
                        align: 'center'
                    }],
                responseHandler: function (res) {  //后台返回的结果
                    console.log(res);
                    if(res.code == "200"){
                        var userInfo = res.data.list;
                        var NewData = [];
                        if (userInfo.length) {
                            for (var i = 0; i < userInfo.length; i++) {
                                var dataNewObj = {
                                    'id': '',
                                    "name": '',
                                    'sex': '',
                                    'age': '',
                                    'address': ''
                                };

                                dataNewObj.id = userInfo[i].id;
                                dataNewObj.name = userInfo[i].name;
                                dataNewObj.sex = userInfo[i].sex;
                                dataNewObj.age = userInfo[i].age;
                                dataNewObj.address = userInfo[i].address;
                                NewData.push(dataNewObj);
                            }
                            console.log(NewData)
                        }
                        var data = {
                            total: res.data.total,
                            rows: NewData
                        };

                        return data;
                    }

                }

            });
        };

        // 得到查询的参数
        function queryParams(params) {
            var userName = $("#keyWord").val();
            console.log(userName);
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageNum: params.pageNumber,
                pageSize: params.pageSize,
                username: userName
            };
            return JSON.stringify(temp);
        }

        return oTableInit;
    }
    //刷新表格
    function getUserList() {
        $("#userTable").bootstrapTable('refresh');
    }

8.数据库表
在这里插入图片描述
9.我们来启动一下看看

10.这样我们就实现了分页