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;
}

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