解决Bootstrap Table不能多次更新表格视图

今天遇到的问题,使用Bootstrap Table表格在初次加载后便不能再次更新数据,调用接口会发现接口都没有走有木有,到底怎么回事,我哪里写错了吗,可是真的没有错误啊有木有,其实也很简单呢,我...

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


我的表格效果图:

attachments-2020-08-Ju3R0N2O5f33a220d3fe4.png





你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
粪斗
粪斗

185 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Garmcrypto7undop 0 文章