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

Posted 2023-05-09

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

【英文标题】：datatables jquery - Uncaught TypeError : CAnnot read property 'show' of undefined

【发布时间】：2015-11-26 02:03:56

【问题描述】：

谁能帮我找出下面代码的问题。

我正在尝试做的事情： 使用 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(row.data()) 返回 json，对吗？

@DelightedD0D - 是的，这是正确的。已验证

可以显示格式吗？

example here 似乎表明 row.child().show() 需要 html，仍在查看文档以查看是否接受 json

printd函数返回一个html字符串，这是我期望show函数处理的。

【参考方案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');
              
          );
      
  );

【讨论】：

你为什么在第二种方法中再次调用formatx？ row.child(formatx(row.data(pdata))).show();

@user5249203 只是忘记在第二个示例中更新该行。更新为row.child(row.data(pdata)).show();ty

感谢您的快速更新。您的解决方案很有帮助。

方法二：row.child(row.data(pdata)).show();替换为 row.child(pdata).show();