bootstrap-table 服务端分页、导出笔记以及客户端分页注意事项

真正需要用到分页的时候才知道bootstrap-table插件的强大和便利之处，记录下使用过程，再次用到时少走弯路

官方源码地址：https://github.com/wenzhixin/bootstrap-table，里面有需要的js和css

先上一个项目截图吧：

用到的js和css文件有：

文件引用：

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入    https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js-->
        <script src="js/jquery-3.3.1.min.js"></script>


        <!-- Bootstrap CSS 文件 -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Bootstrap JavaScript文件 -->
        <script src="js/bootstrap.min.js"></script>


        <!-- bootstrap-table js文件 -->
        <script src="js/bootstrap-table.js"></script>
        <!-- bootstrap-table css文件 -->
        <link rel="stylesheet" href="css/bootstrap-table.css">
        <!-- bootstrap-table汉化文件，放在 bootstrap-table.js 后面 -->
        <script src="js/bootstrap-table-zh-CN.js"></script>
        <script src="js/bootstrap-table-export.js"></script>
        <!-- tableExport -->
        <script src="js/tableExport.js"></script>

HTML：

<div class="container-fluid">
    <div id="toolbar"></div>
    <table id="dataTable"></table>
</div>

1、服务端分页

js:

$(function(){
    InitMainTable();
})
//设置传入参数
function queryParams(param) {
    //String orderno, String startDate, String endDate, String customerId, Integer orderstatus, String page
    var orderNo= $('#orderNo').val();
    var startDate =  $('#startDay').val();
    var endDate = $('#endDay').val();
    var customerId = $('#customerId').val();
    var orderstatus = $('#orderStatus option:selected') .val();
    if ( startDate > endDate){
        alert("截止日期必须大于起始日期");
        return false;
    }
    console.log({"page":((param.offset / param.limit) + 1),"orderNo":orderNo,"startDate":startDate,"endDate":endDate,"customerId":customerId,"orderstatus":orderstatus})
    return {
        limit : param.limit,
        offset : param.offset,
        page : (param.offset / param.limit) + 1,
        orderNo : orderNo,
        startDate : startDate,
        endDate : endDate,
        customerId : customerId,
        orderstatus : orderstatus
    };
}

//初始化bootstrap-table的内容
function InitMainTable () {
    //销毁表格数据
    $('#dataTable').bootstrapTable('destroy');// 销毁表格数据
    //记录页面bootstrap-table全局变量$table，方便应用
    $('#dataTable').bootstrapTable({
        url: "getOrderInfo",                      //请求后台的URL（*）/deposit/
        method: 'POST',                             //请求方式（*）
        contentType : 'application/x-www-form-urlencoded',//post请求设置此项application/x-www-form-urlencoded
        toolbar: '#toolbar',              //工具按钮用哪个容器
        icons: {refresh: "glyphicon-repeat", toggle: "glyphicon-list-alt", columns: "glyphicon-list"},//设置刷新，切换，列图标
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: 10,                     //每页的记录行数（*）
        pageList: [10],                     //可供选择的每页的行数（*）
        search: false,                      //是否显示表格搜索
        strictSearch: true,                  // 设置为 true启用 全匹配搜索，否则为模糊搜索
        showColumns: true,                  //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        //height: 800,                         //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                  //是否显示父子表
        //得到查询的参数
        queryParams : queryParams,
        paginationFirstText : "第一页",
        paginationPreText : "上一页",
        paginationNextText : "下一页",
        paginationLastText : "最后一页",
        showExport: true,                     //是否显示导出
        exportDataType: "all",             //basic', 'all', 'selected'.
        columns: [{
            title : '序号',
            align: "center",
            formatter: function (value, row, index) {
                //获取每页显示的数量
                var pageSize=$('#dataTable').bootstrapTable('getOptions').pageSize;
                //获取当前是第几页
                var pageNumber=$('#dataTable').bootstrapTable('getOptions').pageNumber;
                //返回序号，注意index是从0开始的，所以要加上1
                return pageSize * (pageNumber - 1) + index + 1;
            }
        },{
            field: 'orderno',
            title: '订单编号',
            //sortable: true
        }, {
            field: 'customerid',
            title: '客户编号(身份证号)',
        }, {
            field: 'customername',
            title: '姓名',
        }, {
            field: 'customeraccno',
            title: '支付账户',
        },{
            field: 'orderamount',
            title: '订单金额',
        }, {
            field: 'paytime',
            title: '支付时间',
        },{
            field: 'orderstatus',
            title: '订单状态',
            formatter: function (value) {
                if(value==0){
                    return "待支付";
                }else if(value==1){
                    return "支付中";
                }else if(value==2){
                    return "支付成功";
                }else if(value==3){
                    return "支付失败";
                }
            }
        }, {
            field: 'tranmsg',
            title: '状态说明'
        }],
        onLoadSuccess: function (res) {
            console.log(res)
            if(res.errCode!="0000"){
                alert(res.errMsg);
                return false;
            }

        },
        onLoadError: function () {
           // showTips("数据加载失败！");
        }
    });
};
$(document).on('click', "#queryButton",function(){
    console.log("Button")
    $('#dataTable').bootstrapTable('refresh');
});

关于Controller的返回数据也有要求，返回数据一定要有total和rows这两项，否则会提示无匹配数据

2、客户端分页

在分页方式中设置为client即可，Controller返回数据只返回一个list，否则会提示无匹配数据、

3、导出

关于导出按钮，js中有详细说明，本项目中导出按钮设置在右上角，如图：

这里选择MS-Excel项就可以导出到excel文件里了。提示：服务端分页导出数据类型里面选择all是无效的，只能导出本页数据。