mit DataTable - Uncaught ReferenceError: Tabelle ist nicht definiert

Question

Ich habe das folgende Skript, war bereits perfekt funktioniert, dann entstand die Notwendigkeit, eine zweite Ebene in jedem Datensatz der Tabelle zu setzen. In der ersten Spalte habe ich eine Schaltfläche, wenn sie angeklickt werden die Details dieses Datensatzes öffnen, genau wie der im Bild unten

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     console.log("Entrou na função"); 
     console.log("Versão DataTable=" + $.fn.dataTable.version); 


     //init the table 
     var dataTable = $('#employee-grid').DataTable({ 
      "language": { 
       "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json" 
      }, 
      "columnDefs": [{ 
       className: "details-control", 
       "targets": [0] 
      }], 


      //********************  
      //"destroy": true,     
      "processing": true, 
      "serverSide": true, 
      "ajax": { 
       url: "phpmysql_serverside.php", // json datasource 
       type: "post", // method , by default get 
       error: function() { // error handling 
        $(".employee-grid-error").html(""); 
        $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">Sem registros</th></tr></tbody>'); 
        $("#employee-grid_processing").css("display", "none"); 

       } 
      } 


     }); 

     var oTable; 
     oTable = $('#employee-grid').DataTable(); 
     $('#aplicativos').change(function() { 
      if ($(this).find("option:selected").text() === "Escolha um APP") 
       oTable.fnFilter(''); 
      else 
       oTable.fnFilter($(this).find("option:selected").text()); 
     }); 


     // Add event listener for opening and closing details 
     $('#employee-grid tbody').on('click', 'td.details-control', function() { 
      console.log("Click"); 
      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(format(row.data())).show(); 
       tr.addClass('shown'); 
      } 
     }); 
    }); 

    /* Formatting function for row details - modify as you need */ 
    function format(d) { 
     // `d` is the original data object for the row 
     return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + 
      '<tr>' + 
      '<td>Full name:</td>' + 
      '<td>' + d.name + '</td>' + 
      '</tr>' + 
      '<tr>' + 
      '<td>Extension number:</td>' + 
      '<td>' + d.extn + '</td>' + 
      '</tr>' + 
      '<tr>' + 
      '<td>Extra info:</td>' + 
      '<td>And any further details here (images etc)...</td>' + 
      '</tr>' + 
      '</table>'; 
    } 
</script> 

ich den folgenden Code hinzugefügt, wenn auf dem ersten Klick Spalte der Registerkarte. Öffnen Sie einen sekundären Datensatz. Aber Sie geben diesen Fehler Ich habe alles versucht, und ich glaube nicht, das Problem

// Add event listener for opening and closing details 
$('#employee-grid tbody').on('click', 'td.details-control', function() { 
    console.log("Click"); 
    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(format(row.data())).show(); 
     tr.addClass('shown'); 
    } 
}); 

Durch Klicken auf die Schaltfläche zeigt die folgende Meldung:

Uncaught Reference: Tabelle nicht definiert ist

EDIT Der Fehler tritt hier

Var row = table.row (tr); 

Answer 1

konnte ich

var oTable = $('#employee-grid').DataTable(); 

Answer 2

nur hinzufügen Da Sie Variable oTable benannt erklärt, Sie zu diesen Variablennamen, nicht zu table bleiben sollen.

Verwenden Sie daher oTable.row anstelle von table.row.