Question

我正在尝试为此创建类似的功能：http://www.datatables.net/release-datatables/examples/api/row_details.html。

我的代码唯一的主要区别是我正在尝试通过Ajax获取数据，但它不起作用！

Ajax请求本身是成功的，我可以在响应中看到HTML代码。

我的JS代码：

/* Creata TableData
--------------------------------------------*/
function fnFormatDetails ( StreetVal, oTable, nTr )
{
    var sOut = $.ajax({
      url: "ajax.php",
      data: StreetVal,
      success: function(data) {

          console.log(data);
          return data;

      }
    });

    return sOut;
}

$(document).ready( function(){


    $('.table-data tbody tr td a').addClass('closed');

    var oTable = $('.table-data').dataTable({ 
        "sPaginationType": "full_numbers", 
        "bStateSave": false, 
        "bRetrieve": true
    });

    $('.table-data tbody tr td a').live('click', function (event) {

        var StreetVal = $(this).attr('href').split('#')[1];
        var nTr = this.parentNode.parentNode;

        if( $(this).hasClass('closed') ) {

            $(this).removeClass('closed').addClass('open').html(' - ');
            oTable.fnOpen( nTr, fnFormatDetails( StreetVal, oTable, nTr ), 'details' );

        } else {

            $(this).removeClass('open').addClass('closed').html(' + ');
            oTable.fnClose( nTr );
        }

        return false;


    });

});

问题在于它抛出错误：

无法转换JavaScript参数arg 0 [nsIDOMHTMLTableCellElement.appendChild] [打破此错误] nNewCell.appendChild（mHtml）;

在jquery.dataTables.js / v.1.8.3.dev的第1776行

有什么问题？任何建议都非常感激。

Answer 1

实际上在fnFormatDetails中返回“sOut.responseText”而不是sOut似乎有效。

Answer 2

看起来nTr是一个JS节点，而不是一个Jquery元素。您可以尝试像这样设置nTr：

var nTr = $(this).parent("tr")[0];

另外，尝试在Ajax请求中加入“async：false”，以确保在调用函数之前完成它。

Answer 3

使用JS代码：

function fnFormatDetails ( StreetVal, oTable, nTr )
{
    var sOut = $.ajax({
      url: "ajax.php",
      async: false, // added 
      data: StreetVal,
      success: function(data) {
          return data;            
      }
    });

    return sOut.responseText; / changed form `return sOut`
}

使用带有Ajax请求的嵌套表创建新行

3 个答案: