今天遇到的问题,使用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(),现在调用是生效的哦。
我的表格效果图: