使用Ajax將HTML加載到Datatable子行中

Question

當用戶單擊表的行時，我試圖將從控制器返回的html加載到div中。

這是我的代碼：

   // Add event listener for opening and closing details
   jQuery('#exRowTable tbody').on('click', 'td.details-control', function () {
     var tr = $(this).closest('tr');
     var row = exRowTable.row(tr);

      if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format()).show();
                    tr.addClass('shown');
                    loadChildRow(row);
                }
            });


 function format() {
            return '<div id="detailsDiv"></div>';
        };

        function loadChildRow(row) {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("ChildRow","Users",new{ id= 1})',
                data: null,
                success: function (data) {
                   $('.detailsDiv').innerHTML = data;                        
                }
            });
        };

但是，這實際上並未正確插入html。

我認為這可能與將div動態添加到dom有關。

我究竟做錯了什么？

另外，我想知道如何將row var傳遞到`loadChildRow（）1函數，然后僅從該行內的div中進行選擇。 任何想法我該怎么做？

Answer 1

正如我在您的代碼中看到的那樣，您將在format函數中添加一個id為“ detailsDiv”的div。 但是，在ajax調用后添加html時，您使用的是“ .detailsDiv”，它試圖查找名稱為“ detailsDiv”的類（不是id）（您的頁面中可能不存在）。 這可能是數據不顯示的原因之一。

另外，頁面中應該只有一個具有特定ID的元素。 在這種情況下，如果有人嘗試擴展表中的兩行，它將創建兩個HTML元素（div），其ID為“ detailsDiv”。 這可能會導致不可預測的結果。

我在開發人員設置中也有類似的代碼。

function format() {
  return '<div id="detailsDiv_' + rowId +'"></div>';
};

function loadChildRow(row) {
  $.ajax({
    type: 'GET',
    url: '@Url.Action("ChildRow","Users",new{ id= 1})',
    data: null,
    success: function (data) {
      $('#detailsDiv_' + rowId).html(data);                       
    }
  });
};

在上面的代碼“ rowId”中，可以隨機生成，也可以只是一個計數器來標識特定的行。

Answer 2

對於第一個問題：

            success: function (data) {                 
                        $('.detailsDiv').html(data);                       
            }

關於第二個問題：您能舉例說明您想做什么嗎？

Answer 3

我發現如果您插入html頁面，它不會應用您當前的頁面樣式。 因此，將格式添加到您要插入的頁面中，因為它被視為單獨的頁面。

Answer 4

你有嘗試過嗎？

$.ajax({
  type: 'GET',
  async: false,
  url: '@Url.Action("ChildRow","Users",new{ id= 1})',
  data: null,
  success: function (data) {
    $('.detailsDiv').innerHTML = data;                        
  }
});