jQuery - динамически добавлять ячейки таблицы со значением из вызова AJAX

Question

Используя jQuery, как я могу заполнить значение ячеек таблицы с помощью вызова AJAX, когда сама ячейка таблицы создается с программной точки зрения?

Я строю страницу, которая работает следующим образом:

1. Выполните начальный вызов AJAX, ожидая массив JSON, например, список имен элементов
2. AJAX обратный вызов использует jQuery.each для перебора массива
3. обратного вызова для каждого элемента массива добавляет строку в таблицу, с названием пункта
4. Есть дополнительные элементы (скажем, они представляют собой элемент местоположения), но чтобы получить значение этого, необходимо сделать еще один вызов AJAX (помечен как * в образце) - Как я могу реализовать эту функцию?

Пример структуры таблицы:

Name  Location1 Location2 
================================ 
Item1   *   * 
Item2   *   * 

Другие соображения:

• Нужно, чтобы обслужить динамический число столбцов, то есть местах. Вот почему я
• Я знаю, что есть большое количество звонков, но не заботится о том, что на этот вопрос
• Я использую DataTables плагин
• Я хотел бы понять, является ли это на самом деле может быть сделано без просто изменение бэкэнда веб-служб для создания всей таблицы или, по крайней мере, строки за раз. Выполняя запрос для каждой ячейки, я могу повторно использовать существующие вызовы.

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

$("#tableID").find("tbody").append($('<tr>') 
    .append($('<td>').text(...)) 
    .append($('<td>').text(...)) 
    .append($('<td>').text(...)) 
); 

Я думаю, я мог бы генерировать идентификаторы для каждой ячейки, а затем выстрелить вызовы AJAX, основанные на том, что, но это кажется немного неуклюжим. Есть ли более элегантный способ сделать это?

В идеале любое решение также может быть настроено для обработки варианта использования дополнительного столбца в таблице, например. Location3 в приведенной выше таблице примеров.

Answer 1

var nEditing = null; 
$('#query_for_search_result_table_new').click(function (e) { 
      e.preventDefault(); 
      var aiNew = oTable.fnAddData(['', '', '', '<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>', '']); 
      var nRow = oTable.fnGetNodes(aiNew[0]); 
      editRow(oTable, nRow); 
      nEditing = nRow; 
     }); 

function editRow(oTable, nRow) { 

      var aData = oTable.fnGetData(nRow); 
      var jqTds = $('>td', nRow); 
      jqTds[0].innerHTML = $("#dvFieldLabel").html(); 
      jqTds[1].innerHTML = $("#dvFieldOperator").html(); 
      jqTds[2].innerHTML = '<input type="text" class="m-wrap small" value="' + aData[2] + '">'; 
      jqTds[3].innerHTML = '<a class="edit" href="">Save</a> &nbsp; <a data-mode="new" class="cancel" href="">Cancel</a>'; 
      jqTds[4].innerHTML = '<label>' + aData[0] + ' ' + aData[1] + ' ' + aData[2] + '</label>'; 



     }