title: Bootstrap: data-sort on dynamic table
body: <p>I have a bootstrap table as follows:</p>
  
  <pre><code>&lt;table id="fullDataTable"
                  class="table table-bordered"
                  data-toggle="table" 
                  data-classes="table"
                  data-striped="true"
                  data-sort-name="numFrame"
                  data-sort-order="desc"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                              &lt;th class="col-sm-1"
                        data-field="numFrame"
                        data-sortable="true"&gt;numFrame&lt;/th&gt;
                              &lt;th class="col-sm-1"
                        data-field="timeStamp"
                        data-sortable="false"&gt;timeStamp&lt;/th&gt;
                              &lt;th class="col-sm-1"
                        data-field="id_robot"
                        data-sortable="false"&gt;idRobot&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody id="dataTable"&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>The table is then filled dynamically with values from a MySQL database with Javascript:</p>
  
  <pre><code>socket.on('gotDataQuality', function(message) {
  if(message == 0){
      alert('No Quality datas for this session');
      clearElement("dataTable");
  }else{  
      clearElement("dataTable");
      for (var i = message.length-1; i &gt;= 0; i--) { 
          $('#dataTable').prepend('&lt;tr&gt;&lt;td&gt;'+message[i].numFrame+'&lt;/td&gt;&lt;td&gt;'+message[i].timeStamp+ '&lt;/td&gt;&lt;td&gt;'+message[i].idRobot+'&lt;/td&gt;&lt;/tr&gt;');
      }
  }
  });
  </code></pre>
  
  <p>The table fills correctly but when I attempt to sort it (by clicking on one of the sortable headers) the contents of the table is erased. I'm not entirely sure how the <code>data-sort</code> element works, what can I do to resolve this? </p>