Ввод HTML непосредственно в ячейку таблицы, которая заполняется из json-файла

Question

На странице результатов поиска у меня есть таблица, использующая плагин bootstrap-table (http://bootstrap-table.wenzhixin.net.cn/) для загрузки, который автоматически извлекает информацию из json-файла заполните ячейки. Таблица выглядит следующим образом:

<table data-toggle="table" data-striped="true" data-classes="table table-hover" data-url="certs2.json"> 
     <thead> 
     <tr> 
      <th style="width:40%" data-sortable="true" data-field="DateReturned">Date Returned</th> 
      <th style="width:40%" data-sortable="true" data-field="CertNum">Certificate Number</th> 
      <th style="width:20%" class="text-center">Actions</th> 
     </tr> 
     </thead> 
    </table> 

В колонке действий, я хочу перечислить <button>, но так как клетки бутстраповской-таблицы заполняются автоматически из файла JSON, то <table> не будет принимать <tbody> и я не могу вставить ничего в ячейку, которая не входит в этот json-файл.

Что мне нужно - это способ добавить <button> в каждую ячейку в столбце «Действия», каждый из которых будет иметь другую ссылку в зависимости от результата столбца «Номер сертификата». Это возможно?

Answer 1

Я изучил плагин, и я думаю, что вы могли бы делать то, что я обычно делал, используя jQuery dataTables для angularjs. Предполагая, что вы создали таблицу, как:

var plugin = $("<selector>").bootstrapTable({ 
    data : data, 
    onPostBody : function() { 
     //leverage this event to walk through the body dom and inject the fragment in appropriate cells. 
    }) 
}); 

Допустим, вы дали колонку действия, как:

<th class="text-center" data-class="actions">Actions</th> 

я мог бы сделать что-то подобное в блоке обратного вызова:

var buttonTemplate = _.template('<button class="btn btn-default action-buton" data-id="<%=id%>">Shout</button>'); 
var data = plugin.getData(); 
$("<table selector> tbody tr").each(function() { 
    var row = $(this); 
    var index = row.data("index"); //since each row element would have "data-id='...'" attribute 
    row.find(".actions").html(buttonTemplate(data[index])); 
    }); 

I думайте, что это должно это сделать.