datatables jquery - Uncaught TypeError : CAnnot read property 'show' of undefined

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 并将其 return 发送到 formatx(d) 但是 formatx(d) 没有 return 任何东西。

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

我至少可以想到 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();
 }

方法二

将所有功能合并到一个块中，让 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');
              }
          });
      }
  });

datatables jquery - Uncaught TypeError : CAnnot read property 'show' of undefined

datatables jquery - Uncaught TypeError : CAnnot read property 'show' of undefined

javascript

ajax

datatable

jquery

方法一

方法二