Bootstrap-table動態表格

在開發中遇到一個需要動態生成table的需求，包括表頭和數據。在調試的過程中遇到很多問題，包括數據分頁，解決之后記錄一下。

如下代碼的數據加載流程：

①表頭是動態的，在初始化table之前需要調一次后台拿到表頭數據存儲再全局變量table_columns中，調用initTable()初始化table。（此時table只加載出表頭，沒有數據。）

②table加載之后調用下面refreshTable()方法，請求后台拿到數據，此處因為我這里后台的數據不是bootstrap-table能處理的數據格式，使用了responseHandler對返回數據進行了格式化。

③之后如果需要顯示其他數據，調用destroyTable()方法銷毀table再重新初始化即可。

數據格式

我這里使用的是server分頁，需要的數據格式是{“total”:“總條數”,“rec”:“[{},{}]”} 這種json格式的。total表示總記錄條數（server分頁必須有此鍵），rec是數組形式的（默認應該是叫做rows，此處我在初始化table時將dataField設置成了rec）。

表頭也是json數組格式的：table_columns=[{"checkbox": "true"},{"field": "Create date","title": "Create date"},{"field": "Create time","title": "Create time"}]; 

//table標簽

<table id="auto_table"></table>

//下面是動態table js代碼
//設置全局變量queryFlag  用於判斷是點擊查詢按鈕 還是點擊下方分頁的頁碼 不設置此參數會導致如果點擊了分頁頁碼，再選擇其他條件查詢時，offset參數傳遞到后台不是0
var queryFlag=false;
// 動態table表頭數組

 var table_columns=[]; 
//是初始化table的代碼 function initTable(){ $('#auto_table').bootstrapTable({ //url: '', //請求后台的URL（*）因為是動態表頭，table加載時不請求后台，只初始化表頭 contentType: "application/json", //期望后台返回數據類型 //data:table_data, //直接加載靜態數據 此處不使用 method: 'POST', //請求方式（*） dataField: "rec", //數據節點 默認為rows 改成rec后需要后台返回的數組為rec toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） 兩種分頁方式所需的數據結構不同 limit: 10, //每頁的記錄行數（*） offset: 1, // 初始化加載第一頁，默認第一頁,並記錄 totalrows:0, //記錄總條數 pageList: [10, 25, 50], //可供選擇的每頁的行數（*） search: false, //是否顯示表格搜索 strictSearch: true, singleSelect: true, //單選框 true表示單選 showColumns: true, //是否顯示所有的列（選擇顯示的列） showRefresh: false, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點擊選中行 //height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 //uniqueId: "ID", //每一行的唯一標識，一般為主鍵列 showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 //得到查詢的參數 queryParams : function (params) { //傳到后台的參數 這里的鍵的名字和后台控制器的變量名必須一致，這邊改動，控制器也需要改成一樣的 var temp = {
　　　　　　　　　　　　//分頁參數 這三個參數傳到后台即可進行分頁 limit: params.limit, offset: params.offset, totalrows: params.totalRows,
　　　　　　　　　　　　//下面是個性化請求參數 根據你的業務傳值 key_word1: $("#qry_keyword1").val(), key_word1_name: $("#qry_keyword1_name").val(), bus_cd:$("#qry_bus_cd").val() };
　　　　　　　　　　　if(queryFlag){
　　　　　　　　　　　　　　temp.offset=0;
　　　　　　　　　　　} return JSON.stringify(temp); }, columns:table_columns, //動態表頭 數據從后台獲取 onLoadSuccess: function () { console.log("load success"); }, }); }

//刷新table   
 function refreshTable(){
　　　　　queryFlag=true;
        $('#auto_table').bootstrapTable('refreshOptions',
            { 'url': "url：此處為后台url",
                responseHandler: function(data){
                    var recData=new Array();
                    var data_rec=data.rec;
                    for(let i=0;i<data.rec_num;i++){
                        recData[i]=JSON.parse(data_rec[i].data);
                        recData[i].compare_data=data_rec[i].data;
                        recData[i].old_data=data_rec[i].old_data;
                    }
                    return {
                        "total":data.total,
                        "rec":recData
                    };
                },
            });
　　　　　queryFlag=false;
    }

    /**
     * 銷毀table
     */
    function destroyTable(){
        $('#auto_table').bootstrapTable('destroy');
    }