SpringBoot + bootstrap-table 实现表格查询并分页

﹏ヽ暗。殇╰゛Y 2024-04-23 20:12 7阅读 0赞

bootstrap-table表格：

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

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
    
    <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
    
    <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    
    <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);
        }