datatables jquery - 未捕获的类型错误：无法读取未定义的属性“显示”

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 调用，这意味着返回的值不会立即可用，因此您的逻辑必须考虑到这一点。

我能想到的方法至少有 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');
              }
          });
      }
  });