datatables jquery - 未捕获的TypeError：CAn未读取未定义的属性“show”

Question

有人可以帮我识别下面代码的问题。

我想做什么： 使用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
    });
}

我得到的错误（因为我没有显示数据）是：

Answer 1

目前，您的函数formatx(d)调用printd(data)创建html并将其返回formatx(d) ，但 formatx(d)不会返回任何内容。

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

至少有两种我能想到的方法（更多的方法，可能更好）。

方法1

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

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