Динамическое клонирование и заполнение таблиц

Я пытаюсь создать и заполнить таблицы bootstrap из json.
Объект json выглядит следующим образом:[{"1":[{field1:data1,...},{...},...],"2":[{...},...]...}]

Функция jQuery, генерирующая таблицы из json, выглядит следующим образом:

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 = "<h1>Module "+key+"</h1>";
                $("#porttablediv").append(html)
                var a = table.clone(true,true).appendTo("#porttablediv");
                a.find("table").attr("id", key)             //For later fill <-- PROBLEM?
              })
              $.each(response[0], function (key, value){    //filling tables
                $("#"+key).bootstrapTable('load',value)
              })
          },
        });
      }

Таким образом, таблицы генерируются правильно и имеют точно такую же структуру кода, как и созданные в библиотеке bootstrap-table. Но!
Когда я заполняю их, ничего не происходит, ни ошибки, ни успеха, хотя другие делают.

Редактировать 1:

Библиотека bootstrap-table преобразует это:

<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" >
     <thead>
       <tr>
          <th data-field="name" data-sortable="true" >Name</th>
          <th data-field="status" data-sortable="true">Status</th>
          <th data-field="speed" data-sortable="true" >Speed</th>
          <th data-field="label" data-sortable="true" >Label</th>
          <th data-field="module" > Module</th>
        </tr>
    </thead>
</table>

До настоящего времени:

<div class="bootstrap-table" style="display: none;">
  <div class="fixed-table-toolbar">...</div>
  <div class="fixed-table-container" style="padding-bottom: 0px;">
    <div class="fixed-table-header" style="display: none;"><table></table></div>
    <div class="fixed-table-body"><div class="fixed-table-loading" style="top: 42px;">Por favor espere...</div>
      <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">
        ...
      </table>
    </div>
  </div>
  <div class="fixed-table-footer" style="display: none;">...</div>
</div>

1 ответ

  1. В коде

      var a = table.clone(true,true).appendTo("#porttablediv");
      a.find("table").attr("id", key) 
    

    Эта строка table.clone(true,true).appendTo("#porttablediv");возвращает tableи нет "#porttablediv". S0 следующая строка a.find("table").attr("id", key)должна быть изменена наa.attr("id", key)a table


    Таким образом, окончательный код

     var a = table.clone(true,true).appendTo("#porttablediv");
     a.attr("id", key);
    

    Или просто

    var a = table.clone(true,true).appendTo("#porttablediv").attr("id", key);