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

正如我在您的代码中看到的那样，您正在添加一个id =＆＃34; detailsDiv＆＃34;在格式函数中。但是，在ajax调用之后添加html时，您正在使用＆＃34; .detailsDiv＆＃34;，它正在尝试查找名称为＆＃34; detailsDiv＆＃34;的类（而不是id）。（可能在您的页面中不存在）。这可能是数据无法显示的原因之一。

此外，页面中应该只有一个具有特定ID的元素。在这种情况下，如果有人试图在表格中展开两行，它将创建两个带有id＆＃34; detailsDiv＆＃34;的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);                       
    }
  });
};

在上面的代码＆＃34; rowId＆＃34;中，可能是随机生成的，或者只是一个计数器来识别特定的行。

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

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

4 个答案: