Cloning and filling tables dynamically
<p>I am trying to generate and populate bootstrap tables from a json. 
The json object looks like this:
<code>[{"1":[{field1:data1,...},{...},...],"2":[{...},...]...}]</code></p>

<p>The jQuery function generating the tables from the json looks like this:</p>

<pre><code>function fill_table(){
        host = $.url('?host');     //gets parameter from url
        $.ajax({
          type: 'POST',
          url: "/cgi-bin/lalala/some.py",
          dataType: "json",
          data: {"target":"ports", "host":host},
          success: function(response) {
            var table = $("#porttablediv .bootstrap-table") //For cloning table
              $.each(response[0], function (key, value){    //Just generating tables
                html = "&lt;h1&gt;Module "+key+"&lt;/h1&gt;";
                $("#porttablediv").append(html)
                var a = table.clone(true,true).appendTo("#porttablediv");
                a.find("table").attr("id", key)             //For later fill &lt;-- PROBLEM?
              })
              $.each(response[0], function (key, value){    //filling tables
                $("#"+key).bootstrapTable('load',value)
              })
          },
        });
      }
</code></pre>

<p>So the tables are being generated correctly and have the exact same code structure as a the bootstrap-table library generated ones. <strong>BUT!</strong>
When I fill them, nothing happens, not an error, neither success, although the other ones do.</p>

<p><strong>EDIT 1:</strong></p>

<p>The bootstrap-table library converts this:</p>

<pre><code>&lt;table id="porttable" class="table table-bordered" data-toggle="table" data-click-to-select="true" data-show-refresh="true" data-show-columns="true"        data-show-export="true"  data-search="true" &gt;
     &lt;thead&gt;
       &lt;tr&gt;
          &lt;th data-field="name" data-sortable="true" &gt;Name&lt;/th&gt;
          &lt;th data-field="status" data-sortable="true"&gt;Status&lt;/th&gt;
          &lt;th data-field="speed" data-sortable="true" &gt;Speed&lt;/th&gt;
          &lt;th data-field="label" data-sortable="true" &gt;Label&lt;/th&gt;
          &lt;th data-field="module" &gt; Module&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
&lt;/table&gt;
</code></pre>

<p>To this:</p>

<pre><code>&lt;div class="bootstrap-table" style="display: none;"&gt;
  &lt;div class="fixed-table-toolbar"&gt;...&lt;/div&gt;
  &lt;div class="fixed-table-container" style="padding-bottom: 0px;"&gt;
    &lt;div class="fixed-table-header" style="display: none;"&gt;&lt;table&gt;&lt;/table&gt;&lt;/div&gt;
    &lt;div class="fixed-table-body"&gt;&lt;div class="fixed-table-loading" style="top: 42px;"&gt;Por favor espere...&lt;/div&gt;
      &lt;table id="porttable" class="table table-bordered table-hover" data-toggle="table" data-click-to-select="true" data-show-refresh="true" data-show-columns="true" data-show-export="true" data-search="true"&gt;
        ...
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="fixed-table-footer" style="display: none;"&gt;...&lt;/div&gt;
&lt;/div&gt;
</code></pre>