bootstrap table使用服务端分页

逃离我推掉我的手 2022-05-17 11:26 233阅读 0赞

**前端代码**

// 初始化表格
    function initTable() { 
    
            var $table = $('#table');
    
            $table.bootstrapTable('destroy');
            $table.bootstrapTable({
                // 请求方法
                method : "post",
                // 请求的后台地址
                url : "./detail.json",
                // 加载的json格式数据
                contentType: "application/x-www-form-urlencoded",
                fixedColumns: true,
                fixedNumber: 1,
                // 导出所有数据
                exportDataType: 'all', 
                // 显示导出
                showExport: true,
                // 导出支持类型
                exportTypes: ['csv', 'txt', 'excel'],
                // 显示分页开关
                showPaginationSwitch: false,
                // 分页
                pagination: true,
                // 如果设置了分页，首页页码
                pageNumber: 0,
                // 每页的记录行数
                pageSize: 50,
                // 可供选择的每页的行数
                pageList: [50, 100, 200, 300],
                // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                height: 700,
                // 显示间隔颜色
                striped: true,
                // 设置为true, 禁止ajax数据缓存
                cache: false,
                // 显示搜索框
                search: false,
                // 服务端处理分页,客户端处理则为 client
                sidePagination: 'server',
                // 请求服务器携带参数
                queryParams: queryParams,
                // 请求成功后,渲染表格
                responseHandler: responseHandler,
                // 表格列
                columns: [
        [
        // 两行一列类型
        {
            "align": "center",
            "colspan": 1,
            "field": "table_grabTime",
            "rowspan": 2,
            "title": "抓取时间",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_dpt_arr",
            "rowspan": 2,
            "title": "出发-达到",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_flightDate",
            "rowspan": 2,
            "title": "起飞时间",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_flightNo",
            "rowspan": 2,
            "title": "航班号",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_share",
            "rowspan": 2,
            "title": "共享",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_lowStatus",
            "rowspan": 2,
            "title": "低价状态",
            "valign": "middle"
        }, 
        // 一行三列类型
        {
            "align": "center",
            "colspan": 3,
            "field": "table_zhixing",
            "rowspan": 1,
            "title": "智行",
            "valign": "middle"
        }, 
        // 一行两列类型
        {
            "align": "center",
            "colspan": 2,
            "field": "table_qunar",
            "rowspan": 1,
            "title": "去哪儿",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 2,
            "field": "table_ctrip",
            "rowspan": 1,
            "title": "携程",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 2,
            "field": "table_feizhu",
            "rowspan": 1,
            "title": "飞猪",
            "valign": "middle"
        }],
        [
        // 一行一列类型
        {
            "align": "center",
            "colspan": 1,
            "field": "table_zhixing_cabin",
            "rowspan": 1,
            "title": "舱位",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_zhixing_price",
            "rowspan": 1,
            "title": "价格",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_zhixing_supplier",
            "rowspan": 1,
            "title": "供应商",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_qunar_cabin",
            "rowspan": 1,
            "title": "舱位",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_qunar_price",
            "rowspan": 1,
            "title": "价格",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_ctrip_cabin",
            "rowspan": 1,
            "title": "舱位",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_ctrip_price",
            "rowspan": 1,
            "title": "价格",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_feizhu_cabin",
            "rowspan": 1,
            "title": "舱位",
            "valign": "middle"
        }, {
            "align": "center",
            "colspan": 1,
            "field": "table_feizhu_price",
            "rowspan": 1,
            "title": "价格",
            "valign": "middle"
        }]
    ]
            });
    
            $(window).resize(function () { 
                $table.bootstrapTable('resetView');
            });
            // 修正bootstrapTable错误
            $(".fixed-table-header-columns tr:first th:last").removeAttr("rowspan");
    
        }
    
        // 请求服务器携带参数
        function queryParams(params) { 
            // 表格, 追加参数
            var args = $.param({
                // 当前页数 0
                pageNumber : params.offset/params.limit,
                // 每页显示多少条
                pageSize : params.limit
            }) + "&" +$('#searchForm').serialize();
    
            return args;
        }
    
        // 请求成功,渲染表格
        function responseHandler(result) { 
            var temp = {
                // 下面这两个参数是必须有的, 名称不能变
                // 总的数量
                total : result.total,
                // 数据
                rows : result.data
            };
    
            return temp;
        }

**服务端**

**返回数据的封装**

**封装一列信息: PriceDetail**

/** * desc : * create_user : cheng * create_date : 2018/8/10 11:03 */
    public class PriceDetail { 
    
        /** * 抓取时间, 名称要和表格列的field一致 */
        private String table_grabTime;
        /** * 出发-到达 */
        private String table_dpt_arr;
        /** * 起飞时间 */
        private String table_flightDate;
        /** * 航班号 */
        private String table_flightNo;
        /** * 共享 */
        private String table_share;
        /** * 低价状态 */
        private String table_lowStatus;
        /** * 智行 */
        private String table_zhixing_cabin;
        private String table_zhixing_price;
        private String table_zhixing_supplier;
        /** * 去哪儿 */
        private String table_qunar_cabin;
        private String table_qunar_price;
        /** * 携程 */
        private String table_ctrip_cabin;
        private String table_ctrip_price;
        /** * 飞猪 */
        private String table_feizhu_cabin;
        private String table_feizhu_price;
    
        public PriceDetail() {
        }
    
        public String getTable_grabTime() {
            return table_grabTime;
        }
    
        public void setTable_grabTime(String table_grabTime) {
            this.table_grabTime = table_grabTime;
        }
    
        public String getTable_dpt_arr() {
            return table_dpt_arr;
        }
    
        public void setTable_dpt_arr(String table_dpt_arr) {
            this.table_dpt_arr = table_dpt_arr;
        }
    
        public String getTable_flightDate() {
            return table_flightDate;
        }
    
        public void setTable_flightDate(String table_flightDate) {
            this.table_flightDate = table_flightDate;
        }
    
        public String getTable_flightNo() {
            return table_flightNo;
        }
    
        public void setTable_flightNo(String table_flightNo) {
            this.table_flightNo = table_flightNo;
        }
    
        public String getTable_share() {
            return table_share;
        }
    
        public void setTable_share(String table_share) {
            this.table_share = table_share;
        }
    
        public String getTable_lowStatus() {
            return table_lowStatus;
        }
    
        public void setTable_lowStatus(String table_lowStatus) {
            this.table_lowStatus = table_lowStatus;
        }
    
        public String getTable_zhixing_cabin() {
            return table_zhixing_cabin;
        }
    
        public void setTable_zhixing_cabin(String table_zhixing_cabin) {
            this.table_zhixing_cabin = table_zhixing_cabin;
        }
    
        public String getTable_zhixing_price() {
            return table_zhixing_price;
        }
    
        public void setTable_zhixing_price(String table_zhixing_price) {
            this.table_zhixing_price = table_zhixing_price;
        }
    
        public String getTable_zhixing_supplier() {
            return table_zhixing_supplier;
        }
    
        public void setTable_zhixing_supplier(String table_zhixing_supplier) {
            this.table_zhixing_supplier = table_zhixing_supplier;
        }
    
        public String getTable_qunar_cabin() {
            return table_qunar_cabin;
        }
    
        public void setTable_qunar_cabin(String table_qunar_cabin) {
            this.table_qunar_cabin = table_qunar_cabin;
        }
    
        public String getTable_qunar_price() {
            return table_qunar_price;
        }
    
        public void setTable_qunar_price(String table_qunar_price) {
            this.table_qunar_price = table_qunar_price;
        }
    
        public String getTable_ctrip_cabin() {
            return table_ctrip_cabin;
        }
    
        public void setTable_ctrip_cabin(String table_ctrip_cabin) {
            this.table_ctrip_cabin = table_ctrip_cabin;
        }
    
        public String getTable_ctrip_price() {
            return table_ctrip_price;
        }
    
        public void setTable_ctrip_price(String table_ctrip_price) {
            this.table_ctrip_price = table_ctrip_price;
        }
    
        public String getTable_feizhu_cabin() {
            return table_feizhu_cabin;
        }
    
        public void setTable_feizhu_cabin(String table_feizhu_cabin) {
            this.table_feizhu_cabin = table_feizhu_cabin;
        }
    
        public String getTable_feizhu_price() {
            return table_feizhu_price;
        }
    
        public void setTable_feizhu_price(String table_feizhu_price) {
            this.table_feizhu_price = table_feizhu_price;
        }
    }

**封装后台返回信息: PriceDetailResult**

import java.util.ArrayList;
    import java.util.List;
    
    /** * desc : * create_user : cheng * create_date : 2018/8/10 11:14 */
    public class PriceDetailResult { 
    
        /** * 总数 */
        private long total;
        /** * 数据 */
        private List<PriceDetail> data = new ArrayList<>();
    
        public PriceDetailResult() {
        }
    
        public long getTotal() {
            return total;
        }
    
        public void setTotal(long total) {
            this.total = total;
        }
    
        public List<PriceDetail> getData() {
            return data;
        }
    
        public void setData(List<PriceDetail> data) {
            this.data = data;
        }
    
    }

**依次填充PriceDetailResult 的数据即可, 业务逻辑代码不给出**