今天要做一个报表导入并预览的功能，使用layui的文件上传，获取表格数据，接着把表格数据返回前台，使用bootstraptable展示，实现一个预览表格数据的效果。通过后台处理后的数据bootstraptable加载数据，其实具体实现不难，今天要讲的是在实现数据加载之后，我们出现了一些问题，我会附源码讲解问题的解决方案分享给大家

通过后台处理后的数据

// 数据经过处理后,真实数据已做修改Data = [{JJSRBY: 6666,JJSRBYLJ: 155666,JJZCBY: 777,JJZCBYLJ: 2266633,LJJY: 151515,NCYE: 121212,SZYEBY: 11111,SZYEBYLJ: -11559,XZ: "企业职工基本养老保险",ZFNL: 22.1},{JJSRBY: 6666,JJSRBYLJ: 155666,JJZCBY: 777,JJZCBYLJ: 2266633,LJJY: 151515,NCYE: 121212,SZYEBY: 11111,SZYEBYLJ: -11559,XZ: "工伤保险",ZFNL: 22.1},...];

bootstraptable加载数据

// field 需要和 Data中每个对象中的字段名对应。// $('#previewTable').bootstrapTable({    data : Data,    //toolbar: '#toolBar',     striped: true, //是否显示行间隔色    cache: false, //是否使用缓存，默认为true，    //minimumCountColumns: 2, //最少允许的列数    clickToSelect: true, //是否启用点击选中行    columns: [   [         {field : 'XZ', title: '险种', rowspan:2, align:"center"},         {field : 'NCYE', title: '年初余额', rowspan:2,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.NCYE;  return num.toFixed(2);  }         },         {title: '基金收入', colspan:2,align:"center"},         {title: '基金支出', colspan:2,align:"center"},         {title: '当年收支结余', colspan:2,align:"center"},         {field : 'LJJY',title:'累计结余', rowspan:2,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.LJJY;  return num.toFixed(2);  }         },         {field : 'ZFNL',title: '支付能力(月)', rowspan:2,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.ZFNL;  return num.toFixed(1);  }         },       ],       [       {field : 'JJSRBY',title:'本月', colspan:1,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.JJSRBY;  return num.toFixed(2);  }       },       {field : 'JJSRBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.JJSRBYLJ;  return num.toFixed(2);  }       },       {field : 'JJZCBY',title:'本月', colspan:1,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.JJZCBY;  return num.toFixed(2);  }       },       {field : 'JJZCBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.JJZCBYLJ;  return num.toFixed(2);  }       },       {field : 'SZYEBY',title:'本月', colspan:1,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.SZYEBY;  return num.toFixed(2);  }       },       {field : 'SZYEBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",       formatter: function(value, row, index) {       let num = row.SZYEBYLJ;  return num.toFixed(2);  }       }       ]    ],    formatNoMatches : function() {    return '<div style="color: #b8b8b8; height: 15px;"> 暂无数据 </div>';// 如果无数据则显示这个    }    });

这个实现其实不难，但是，没想到的是，接下来的步骤出问题了，因为我们需要实现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;}1234567891011121314151617181920212223242526272829303132333435363738394041

想要实现的效果：
此时我需要在表格上方，加上文本输入框，并添加 查询按钮 ，点击查询按钮，把输入的条件加入到 表格参数 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;}

注意：具体实现代码太过庞大，所以以上代码并不完整只是提供思路。