今天遇到的问题,使用Bootstrap Table表格在初次加载后便不能再次更新数据,调用接口会发现接口都没有走有木有,到底怎么回事,我哪里写错了吗,可是真的没有错误啊有木有,其实也很简单呢,我们每次调用表格数据时去一下即可,下面给大家上代码。
主要代码:
$('#bootstrap-table').bootstrapTable('destroy');
以上代码的含义就是销毁,$('#bootstrap-table')是获取的html内table的ID,请看下面实例。
代码部分实例:(实例仅供参考,不能直接使用,因为接口不通并且没有css样式)
html:
<div class="col-sm-12 select-alarm m-t10 table-striped table-sign"> <table id="bootstrap-table" data-mobile-responsive="true"></table> </div>
js:(/web/mainpage/list是接口地址)
var options; function index() { $('#bootstrap-table').bootstrapTable('destroy'); options = { url: '/web/mainpage/list', search: false, showExport: false, showRefresh: false, showColumns: false, showToggle: false, columns: [ [{ field: '', title: '序号', width: 5, valign: "middle", align: 'center', rowspan: 2, switchable: false, formatter: function (value, row, index) { //return index+1; //序号正序排序从1开始 var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条 var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页 return pageSize * (pageNumber - 1) + index + 1; //返回每条的序号: 每页条数 * (当前页 - 1 )+ 序号 } }, { field: 'carName', title: '车辆名称', valign: "middle", align: "center", rowspan: 2 }, { field: 'workStationName', title: '换电工位', valign: "middle", align: "center", rowspan: 2 }, { field: 'changeBeginTime', title: '换电时间(起/止)', valign: "middle", align: "center", rowspan: 2 }, { field: 'batteryDown', title: '换下电池', valign: "middle", align: "center", rowspan: 1, colspan: 7, }, { field: 'batteryUp', title: '换上电池', valign: "middle", align: "center", rowspan: 1, colspan: 6, }], [{ field: 'batteryDown.batteryNoDown', title: '电池编号(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryDown.batteryVoltageDown', title: '电池电压(V)(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryDown.batteryRestElecDown', title: '电池剩余电量(kWh)(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryDown.useElec', title: '耗电量(kWh)(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryDown.travelMileage', title: '行驶里程(km)', align: 'center', valign: 'middle' },{ field: 'batteryDown.perKilometreElec', title: '平均每公里耗电(kWh)', align: 'center', valign: 'middle' },{ field: 'batteryDown.batteryWarehouse', title: '电池入仓位(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryUp.batteryNoUp', title: '电池编号(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryUp.batteryVoltageUp', title: '电池电压(V)(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryUp.batteryRestElecUp', title: '电量(kWh)(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryUp.chargeElec', title: '本次充电量(kWh)(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryUp.chargeTime', title: '本次充电时间(左/右)', align: 'center', valign: 'middle' },{ field: 'batteryUp.batteryWarehouse', title: '电池出仓位(左/右)', align: 'center', valign: 'middle' }] ] }; $.table.init(options); //$('#bootstrap-table').bootstrapTable('hideColumn', 'bImage'); layui.use('laydate', function () { //新增弹窗时间 var laydate1 = layui.laydate; $(document).on('focus', '.pickerFocuss', function () { laydate1.render({ elem: this, //type: 'datetime', range: ',', trigger: 'click' }); }) }) }; index(); setTimeout(function(){ index() },3000)
页面加载完成3秒后我又调用了一遍index(),现在调用是生效的哦。
我的表格效果图:
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!