《前端》bootstrapTable的銷燬問題--2020年6月8日

【bootstraptable 如何銷燬】-博文推薦-CSDN博客  https://www.csdn.net/gather_21/NtzaQgysODczLWJsb2cO0O0O.html

需求：在table上方添加了文本輸入框，用於查詢過濾table中的數據，因此需要根據查詢條件，重新向後臺向DAO層發送請求，返回新的結果。

另外：BootstrapTable一個頁面只能加載一次。想要重新加載，就必須先銷燬，再重新初始化Bootstraptable。銷燬的方法：

$('#id').bootstrapTable('destroy');

解決過程：

這是一開始進入頁面加載的表格：

$('#infoList').bootstrapTable({
         url: '${pageContext.request.contextPath}/xx/xxx', //請求後臺的URL（*）
         method: 'post', //請求方式（*）
         contentType: 'application/x-www-form-urlencoded',
         toolbar: '#toolbar', //工具按鈕用哪個容器
         striped: true, //是否顯示行間隔色
         cache: false, //是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
         pagination: true, //是否顯示分頁（*）
         sortable: false, //是否啓用排序
         sortOrder: "desc", //排序方式
         sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
         pageNumber: 1, //初始化加載第一頁，默認第一頁
         pageSize: 10, //每頁的記錄行數（*）
         pageList: [10, 50, 100], //可供選擇的每頁的行數（*）
         strictSearch: true,
         showColumns: false, //是否顯示所有的列
         showRefresh: false, //是否顯示刷新按鈕
         minimumCountColumns: 2, //最少允許的列數
         clickToSelect: true, //是否啓用點擊選中行
         //uniqueId: "aac147", //每一行的唯一標識，一般爲主鍵列
         showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
         cardView: false, //是否顯示詳細視圖
         detailView: false, //是否顯示父子表
         queryParams: queryParams, //所需要的參數
       	 queryParamsType: "limit", //參數格式,發送標準的RESTFul類型的參數請求
         columns: myColumns,	// 列名這裏通過別處方法加載
         onClickRow: function (row, obj) {	//點擊事件
             ...
         },
         onLoadSuccess: function (data) {
         	...
         }
});
function queryParams(params) {  //配置參數
        var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
            pageSize: params.limit,   //頁面大小
            pageNumber: (params.offset / params.limit) + 1,  //頁碼
        };
        return temp;
}

想要實現的效果：
此時我需要在表格上方，加上文本輸入框，並添加 查詢按鈕 ，點擊查詢按鈕，把輸入的條件加入到 表格參數 queryParams 中，通過數據庫的查詢 返回數據，並更改表格結構和內容，做到重新加載的效果。

上面的代碼就不能滿足需求了。解決後加載表格：

（1）需要在點擊查詢按鈕時，首先調用 表格銷燬方法。

$('#infoList').bootstrapTable('destroy');

（2）接着在重新加載新的表格：

$('#infoList').bootstrapTable({
url: '${pageContext.request.contextPath}/xx/xxx2', //請求後臺的URL（*）
    method: 'post', //請求方式（*）
    contentType: 'application/x-www-form-urlencoded',
    toolbar: '#toolbar', //工具按鈕用哪個容器
    striped: true, //是否顯示行間隔色
    cache: false, //是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
    pagination: true, //是否顯示分頁（*）
    sortable: false, //是否啓用排序
    sortOrder: "desc", //排序方式
    sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
    pageNumber: 1, //初始化加載第一頁，默認第一頁
    pageSize: 10, //每頁的記錄行數（*）
    pageList: [10, 50 ,100], //可供選擇的每頁的行數（*）
    strictSearch: true,
    showColumns: false, //是否顯示所有的列
    showRefresh: false, //是否顯示刷新按鈕
    minimumCountColumns: 2, //最少允許的列數
    clickToSelect: true, //是否啓用點擊選中行
    showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
    cardView: false, //是否顯示詳細視圖
    detailView: false, //是否顯示父子表
    queryParams: function(params){
    	return {
    		pageSize: params.limit,   //頁面大小
            pageNumber: (params.offset / params.limit) + 1,  //頁碼
            keyword: $("#search_json").val(),	// 關鍵詞
    	};
    },
    queryParamsType: "limit", //參數格式,發送標準的RESTFul類型的參數請求
    columns: myColumns,
    onClickRow: function (row, obj) {
        ...
    },
    onLoadSuccess: function (data) {
        ...
    }
});
function queryParams2(params) {  // 配置參數 有查詢條件用
	    var keyword = $("#search_json").val();
	    var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
	    pageSize: params.limit,   //頁面大小
	    pageNumber: (params.offset / params.limit) + 1,  //頁碼
        keyword: keyword	// 查詢關鍵詞
    };
	return temp;
}

以上代碼並不完整隻是提供思路。