bootstrap table使用服务端分页

前端代码

// 初始化表格
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 的数据即可, 业务逻辑代码不给出