如何更新 bootstrap table 中的数据

Question

我有一个 bootstrap table，代码如下。

  <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({
        });
      });
     }

然后我将一些数据加载到此 table。像这样：

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);

      }

显示数据正常。我在页面上有一个项目下拉列表。更改项目名称后，我想用新数据填充此 table。它没有发生。它正在将数据附加到我不想要的现有 table 数据。

如何刷新 table 并在 table 中加载新数据。

Answer 1

尝试使用 load 而不是 append。

来自official documentation

append - Append the data to table.

load - Load the data to table, the old rows will be removed.

而且两个函数都接受相同的参数data。

Answer 2

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

从性能的角度来看，它可能不如 load 工作得那么快，但它足够快，我从来没有注意到最多 1,000 行的切换。

更新 10.4.2018 上个月回到 bootstrap table 并且 load 正在为我工作，正如现在宣传的那样，所以我不再建议此解决方法。

如何更新 bootstrap table 中的数据

how to update data in bootstrap table

jquery

twitter-bootstrap