今天要做一个报表导入并预览的功能，使用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 > 暂无数据 </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;} 注意：具体实现代码太过庞大，所以以上代码并不完整只是提供思路。