使用 ajax 将 html 加载到 Datatable 子行中答案

【问题标题】：Load html into Datatable child row using ajax使用 ajax 将 html 加载到 Datatable 子行中
【发布时间】：2014-10-14 11:37:23
【问题描述】：

当用户单击表格的行时，我正在尝试将从控制器返回的 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 中进行选择。知道我该怎么做吗？

【问题讨论】：

标签： javascript jquery asp.net ajax razor

【解决方案1】：

正如我在您的代码中看到的，您在格式函数中添加了一个 id="detailsDiv" 的 div。但是，在 ajax 调用之后添加 html 时，您使用的是“.detailsDiv”，它试图查找名称为“detailsDiv”的类（不是 id）（您的页面中可能不存在）。这可能是数据不显示的原因之一。

此外，页面中应该只有一个元素具有特定的 id。在这种情况下，如果有人试图扩展表格中的两行，它将创建两个 id 为“detailsDiv”的 html 元素 (div)。这可能会导致不可预知的结果。

我的开发设置中有类似的代码。

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”，可能是随机生成的，也可能只是一个计数器来标识特定的行。

【讨论】：

【解决方案2】：

第一个问题：

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

关于你的第二个问题：你能给我们举一个你想做的例子吗？

【讨论】：

【解决方案3】：

我发现如果您插入 html 页面，它不会应用您当前的页面样式。因此，将您的格式添加到您尝试插入的页面中，因为它被视为单独的页面。

【讨论】：

你能澄清一下或提供一个例子吗？我做了很多 ajax html 更新，从来没有遇到过样式没有被应用的问题。

【解决方案4】：

你试过了吗？

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

【讨论】：