javascript - datatables jQuery-Uncaught TypeError:无法读取未定义的属性“show”

有人可以帮助我确定以下代码的问题。

我正在尝试做的是：
我正在尝试使用jquery / datatables显示特定行的其他数据（使用ajax调用进行检索）。

数据表定义代码为：

$(window).load(function() {
var table = $('#table_id').DataTable({
    //"font-size" : 2em,
    "columnDefs" : [ {
        className : "details-control",
        "targets"  : [1],
        "orderable" : false },
        {
        "targets" : [2,6],
        "width" : "25%",
        className : "dt-left"},
        {
        "targets" : [3,4,5,7],
        "width" : "10%",
        className : "dt-center"}
        ]
   });
   // Add event listener for opening and closing details
   $('#table_id').on('click', 'td.details-control', function () {
       var tr = $(this).closest('tr');
       var row = table.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(formatx(row.data())).show();
            tr.addClass('shown');
        }

});

}）;

formatx函数和回调函数为：

    function printd(data) {
            var pdata = '';
            for(var i in data.careGivers){
                pdata = pdata + '<tr>'+
                    '<td>Parent: </td>'+
                    '<td>'+data.careGivers[i].ParentName+'</td>'+
                    '</tr>';
                }
                pdata =  '<table cellpadding="3" cellspacing="0" border="0" style="padding-left:50px;">'+pdata+
        '</table>';
                alert(pdata);
                return pdata;
            }

function formatx(d) {

    var val = d[0];
    $.ajax({
        url : "<?php echo site_url('Sclass/get_wl_details_ajax/')?>/"+val,
        dataType:'json',
        success : printd
    });
}

我得到的错误（因为我假设不显示任何数据）是：

最佳答案

当前，函数formatx(d)调用printd(data)，该函数创建html并将其返回到formatx(d)，但是formatx(d)不返回任何内容。

您需要将结果返回到row.child(formatx(row.data())).show();调用。另外，您的formatx()使用ajax调用，这意味着返回的值将不会立即可用，因此您的逻辑必须对此加以考虑。

我至少可以想到2种方法（很多方法可能更好）。

方法一

在函数链中传递row，然后仅在逻辑末尾调用row.child(someData).show();，如下所示：

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

     if (row.child.isShown()) {
         //This row is already open - close it
         row.child.hide();
         tr.removeClass('shown');
     } else {
         //Open this row
         formatx(row) // just pass row to the format function here
         tr.addClass('shown');
     }

 });

 function formatx(row) {
     var val = row.data()[0]; //slight change here
     $.ajax({
         url: "<?php echo site_url('Sclass/get_wl_details_ajax/')?>/" + val,
         dataType: 'json',
         success: function (response) { // change this callback to return the result
             return printd(response,row);
         }
     });
 }

function printd(data,row) {
     var pdata = '';
     for (var i in data.careGivers) {
         pdata = pdata + '<tr>' +
             '<td>Parent: </td>' +
             '<td>' + data.careGivers[i].ParentName + '</td>' +
             '</tr>';
     }
     pdata = '<table cellpadding="3" cellspacing="0" border="0" style="padding-left:50px;">' + pdata +
         '</table>';
     alert(pdata);
     row.child(formatx(row.data(pdata))).show();
 }

方法2

将所有功能合并到一个块中，然后让ajax成功回调为您解决问题，如下所示（如果您不需要从代码中的其他位置调用这些功能，则这会更干净）：

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

      if (row.child.isShown()) {
          //This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
      } else {
          var val = row.data()[0];
          $.ajax({
              url: "<?php echo site_url('Sclass/get_wl_details_ajax/')?>/" + val,
              dataType: 'json',
              success: function (data) {
                  var pdata = '';
                  for (var i in data.careGivers) {
                      pdata = pdata + '<tr>' +
                          '<td>Parent: </td>' +
                          '<td>' + data.careGivers[i].ParentName + '</td>' +
                          '</tr>';
                  }
                  pdata = '<table cellpadding="3" cellspacing="0" border="0" style="padding-left:50px;">' + pdata +
                      '</table>';
                  alert(pdata);
                  row.child(row.data(pdata)).show();
                  tr.addClass('shown');
              }
          });
      }
  });