title: How to create a bootstrap-table dynamically?
body: <p>I'm having trouble developing a bootstrap-table by clicking a button. My goal is to add a sort feature for each columns on a table. So for my user case, when a user clicks on the button, it calls an ajax to grab a data from Database and sends back a result (it works so no worries on it). So i need to display the results as a bootstrap-table so i can use the sort feature for each column. Plus, I'm using pagination.js which uses Array of json objects and table to display the result. 
  When I develop the table and append it into a div, I dont see the sort feature on each columns.</p>
  
  <p>It works when I create a simple hard code HTML table with Bootstrap-table attributes such as sort feature (data-sortable="true"). I believe when the page loads bootstrap detects the  and its attributs that is on the html body. But when I dynamically create a bootstrap-table, the HTML table is there but not the bootstrap-table feature. </p>
  
  <p>Please help. Here is my code below of how i develop the table using javascript function. </p>
  
  <pre><code>// result is a large string of result when ajax is sending a response. 
  function displayResult(result) {
      //convert the result into Array of JSON
      var splitResult = result.split("*split*");
      var getLast = splitResult.length - 1;
      for(var i = 0; i &lt; splitResult.length; i++){
          if(i != getLast) {
              splitResult[i] = JSON.parse(splitResult[i]);
          } else {
              splitResult.splice(i,1);
          }
      }
  
         // the .pagination is a function that is use in pagination.js 
         // the #page is a DIV
      $('#page').pagination({
          dataSource: splitResult,
          pageSize: 8,
          callback: function(data, pagination) {
              // template method
               var html = template(data);
                  // grab the html String and append it into the #demo DIV
              $("#demo").append(html); 
          }
      })
  }
  
  
  function template(data) {
      // table tag with bootstrap-table attributes
      var html = '&lt;table data-toggle="table"  style="width: 100%;"&gt;';
  
      // create the table headers
      html = html + '&lt;thead&gt;&lt;tr&gt;&lt;th data-field="IDCODE" data-sortable="true"&gt;ID&lt;/th&gt;&lt;th scope="col" data-sortable="true"&gt;ZIP 11&lt;/th&gt;&lt;th scope="col" data-sortable="true"&gt;Date&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;'
          + '&lt;tbody&gt;';
  
      // input the results of the data
      if (data[0].IDCODE) {
        $.each(data, function(index, item) {
          html += '&lt;trid="tr-id-2" class="tr-class-2"&gt;&lt;td&gt;'
                  + item.IDCODE+'&lt;/td&gt;' 
                  + '&lt;td&gt;' + item.ZIP11_ID + '&lt;/td&gt;'
                  + '&lt;td&gt;' + item.DEL01_TS + '&lt;/td&gt;&lt;/tr&gt;';
        });
      } else {
        $.each(data, function(index, item) {
          html += '&lt;tr&gt;&lt;td&gt;'+ item +'&lt;/td&gt;&lt;/tr&gt;';
        });
      }
  
      html += '&lt;/tbody&gt;&lt;/table&gt;';
  
      return html;
    }
  </code></pre>
  
  <p>when using this approach, it just display the html table. Not using bootstrap-table. I'm trying to add a feature where a user can click on the column header to sort.</p>