Bootstrap Table update content not working

Question

I'm using wenzhinxin's bootstrap table but having trouble updating the table content.

I have two tables. One displaying all employees and the other displaying reports of the selected employee from the first table mentioned.

when clicking an employee in the first table i call this code to update the data of my second table:

$('#report-table').bootstrapTable('showLoading');

$.ajax({
 type : "POST",
 url : "getReportsForEmployee.php",
 data : "id=" + row['id'],
 dataType:"json",
 success : function(data) 
 {
  $('#report-table').bootstrapTable('hideLoading');
  $('#notification').hide();
  $('#report-table').bootstrapTable({
   data: data
  });
 }

The first time i click an employee, the reports are loaded correctly into my second table, but the second time i click an employee (or third etc) the table is not updated anymore. I checked my network traffic in google chrome to verify that i receive the correct response which i do and i can confirm that the response varies depending on which employee i click. The table seems only to update its content the first time i set the data property.

Answer 1

Figured i had to update this question, since i found the answer long time ago.

What i was missing was calling the load function when the data property was set:

$('#report-table').bootstrapTable('load', data);