如何使 Bootstrap Table 初始化、重新加载

本是古典何须时尚 2021-09-23 09:02 1219阅读 0赞

### BootstrapTable重新加载 ###

*   *  遇到此问题的情景
     *  解决办法
     *   *  原始加载的表格
         *  解决后加载表格

> 最**重要**的一点，写在最前面：BootstrapTable一个页面只能加载一次；想要重新加载，就必须先**销毁** ， 再**重新初始化**Bootstraptable。  
> 销毁的方法：
> 
>     $('#id').bootstrapTable('destroy');

--------------------

## 遇到此问题的情景 ##

在table上方添加了文本输入框，用于查询过滤table中的数据，因此需要根据查询条件，重新向后台向DAO层发送请求，返回新的结果。

## 解决办法 ##

### 原始加载的表格 ###

这是一开始进入页面加载的表格。

$('#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** 中，通过数据库的查询 返回数据，并更改表格结构和内容，做到**重新加载**的效果。

但是失败了。

### 解决后加载表格 ###

需要在点击**查询按钮**时，首先调用 **表格销毁方法**

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

接着在重新加载新的表格：

$('#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;
    }

以上代码并不完整只是提供思路。