SpringBoot + bootstrap-table 实现表格查询并分页-蒲公英云

bootstrap-table表格：

1、需要引入的 css 和 js 文件：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/bootstrap-table@1.21.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

2、在 html 页面中 body 标签中定义一个 form 查询表单，一个div 用于放数据。

<!-- 查询表单 -->
    <div class="card" style="padding: 16px; margin: 0px">
        <b style="margin-bottom: 6px">查询内容:</b>
        <form class="form-inline" id="myFrom">
            <label for="name" class="mb-2 mr-sm-2">姓名:</label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="name" name="name" th:value="${param.name}" placeholder="请输入姓名">
            <label for="career" class="mb-2 mr-sm-2">职业:</label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="career" name="career" th:value="${param.career}" placeholder="请输入职业">
            <label for="date" class="mb-2 mr-sm-2">入职时间:</label>
            <input type="date" class="form-control mb-2 mr-sm-2" id="date_begin" name="date_begin" th:value="${param.dateBegin}" placeholder="起始时间">
            <label for="date_end" class="mb-2 mr-sm-2">-</label>
            <input type="date" class="form-control mb-2 mr-sm-2" id="date_end" name="date_end" th:value="${param.dateEnd}" placeholder="截止时间">
            <button class="btn btn-primary mb-2" style="margin-right: 10px" id="search_btn">查询</button>
        </form>
    </div>
    <!-- 结果数据 -->
    <div id="result" >
        <table id="tb" class="table table-bordered"></table>
    </div>

3、js

$("#tb").bootstrapTable({
            url: "http://localhost:8080/xxx",
            method: 'get',
            dataType: 'json',
            striped: true, //是否显示行间隔色
            pageNumber: 1, //初始化加载第一页
            pagination: true,   //是否显示分页条
            sidePagination : 'server',// server:服务器端分页|client：前端分页
            pageSize: 10,   //一页显示的行数
            pageList: [5, 10, 20],   //选择每页显示多少行，数据过少时可能会没有效果
            showRefresh:false,//刷新按钮
            queryParams : queryParams,// 查询参数
            responseHandler:responseHandler,// 请求数据成功后，渲染表格前调用的方法
            columns:[
                {
                    title:'姓名',
                    field:'name',
                    align: 'center'
                },
                {
                    title:'职业',
                    field:'career',
                    align: 'center'
                },
                {
                    title:'入职时间',
                    field:'date',
                    align: 'center',
                },
                // {
                //     title:'时间',
                //     field:'sj',
                //     align: 'center',
                //     formatter: function (value, row, index){
                //         return new Date(value).Format("yyyy-MM-dd HH:mm:ss");
                // 时间的格式化
                //     }
                // }
            ]
        });
        // 查询按钮事件
        $('#search_btn').click(function() {
            $('#tb').bootstrapTable('refresh');
        })
        /**
         * 获取返回的数据的时候做相应处理，让bootstrap table认识我们的返回格式
         * @param {Object} res
         */
        function responseHandler(res) {
            if(res.code === 20000) {
                return {
                    total: res.data.total,
                    rows: res.data.records
                };
            }
        }
        //请求服务数据时所传查询参数
        function queryParams(params){
            return{
                pageSize: params.limit, //页面大小
                pageNum: (params.offset / params.limit) + 1,   //页码
                name : $("#name").val(),
                career: $("#career").val(),
                dateBegin : $("#date_begin").val(),
                dateEnd : $("#date_end").val()
            }
        }

4、后端接口：

@GetMapping("/getAll")
@ResponseBody
public Result getAllBd(@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
                       @RequestParam(value = "pageSize",defaultValue = "10") Integer pageSize,
                       @RequestParam(name = "name", required = false, defaultValue = "") String name,
                       @RequestParam(name = "career", required = false, defaultValue = "") String career,
                       @RequestParam(name = "dateBegin", required = false, defaultValue = "") String dateBegin,
                       @RequestParam(name = "dateEnd", required = false, defaultValue = "") String dateEnd) {
        // 分页参数
        Page<Employee> pageParam = new Page<>(pageNum, pageSize);
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
        Date beginDate = null;
        Date endDate = null;
        try {
            if (StringUtils.isEmpty(pfsjBegin)) {
                beginDate = format.parse("1950-01-01");
            } else {
                beginDate = format.parse(dateBegin);
            }
            if (StringUtils.isEmpty(pfsjEnd)) {
                endDate = format.parse(format.format(new Date()));
            } else {
                endDate = format.parse(dateEnd);
            }
        } catch (ParseException e) {
            e.printStackTrace();
        }
        // selectPage 自定义的方法
        Page<Employee> pageData = service.selectPage(pageParam, name, career, beginDate, endDate);
        return Result.ok(pageData);
    }