how to update data in bootstrap table

Question

I have one bootstrap table with following code.

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

added below references also.

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

and my jquery code to load data

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

and then I am loading some data to this table. Like this:

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

      }

It is diplaying the data properly. I have one project dropdown on the page. Onchange of the project name i want to populate this table with fresh data. It is not happening. It is appending data to existing table data which i don't want.

How to refresh the table and load new data in the table.

Answer 1

I destroy the table, $('#tblPendingRequests').bootstrapTable("destroy"); and then reload the data, $('#tblPendingRequests').bootstrapTable({data: myFreshData});.

From a performance perspective it might not be as fast as getting load to work, but it's fast enough that I've never noticed a switch over with up to 1,000 rows.

Update 10.4.2018 Came back to bootstrap table this past month and load is working for me as advertised now, so I'm no longer suggesting this workaround.

Answer 2

Try to use the load instead of append.

From the official documentation

append - Append the data to table.

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

Also both functions accept the same argument data.