title: How to refresh bootstrap table data
body: <p>I have one bootstrap table with the following code.</p>
  
  <pre><code>&lt;table id="tblPendingRequests" data-height="300"&gt;
     &lt;thead&gt;
       &lt;tr&gt;
           &lt;th data-field="Version"&gt;Version&lt;/th&gt;
           &lt;th data-field="Env"&gt;Env&lt;/th&gt;
           &lt;th data-field="Release"&gt;Release&lt;/th&gt;
           &lt;th data-field="CreatedBy"&gt;Created By&lt;/th&gt;
           &lt;th data-field="Action"&gt;Action&lt;/th&gt;
       &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>added below references also.
      
      </p>
  
  <pre><code>function loadData(){
      $(function () {
          $('#tblPendingRequests').bootstrapTable({});
      });
  }
  </code></pre>
  
  <p>Then I am loading some data to this table with the following lines of code </p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>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 dont want. How to refresh the table and load new data in the table. </p>