如何更新bootstrap表中的数据

Question

我有一个带有以下代码的引导程序表.

  <table id="tblPendingRequests" data-height="300">
       <thead>
          <tr>
             <th data-field="Version">Version</th>
             <th data-field="Env">Env</th>
             <th data-field="Release">Release</th>
             <th data-field="CreatedBy">Created By</th>
             <th data-field="Action">Action</th>
          </tr>
      </thead>
   </table>

以下也参考了.

<script src="~/Scripts/bootstrap-table.js"></script>
<link href="~/Content/bootstrap-table.min.css" rel="stylesheet" />

和我的jquery代码来加载数据

     function loadData()
     {
       $(function () {
        $('#tblPendingRequests').bootstrapTable({
        });
      });
     }

然后我将一些数据加载到此表.像这样:

var mydata = { "Version": data[index].DeploymentName, "Env": data[index].EnvName, 
                  "Release":data[index].ReleaseName, "CreatedBy": data[index].UpdatedBy  "Action": ActionButton };
            testData.push(mydata);
      updateData(testData);
  function updateData(myData) {
     $('#tblPendingRequests').bootstrapTable("append", myData);

      }

它正确地绘制数据.我在页面上有一个项目下拉列表.在项目名称的更改中,我想用新数据填充此表.它没有发生.它将数据附加到我不想要的现有表数据.

如何刷新表并在表中加载新数据.

Answer 1

尝试使用load而不是append.

从官方文档

append - 将数据附加到表.

load - 将数据加载到表中,旧行将被删除.

两个函数也接受相同的参数data.

Answer 2

我销毁表,$('#tblPendingRequests').bootstrapTable("destroy");然后重新加载数据,$('#tblPendingRequests').bootstrapTable({data: myFreshData});.

从性能的角度来看,它可能没有load上班那么快,但它足够快,我从来没有注意到切换多达1,000行.

更新10.4.2018上个月 回到bootstrap表load,现在就像我所宣传的那样为我工作,所以我不再建议这个解决方法了.