使用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;                        
  }
});