Hinzufügen von detaillierten Informationen/untergeordneten Zeilen zu einigen Einträgen in Datatabellen

Question

Aus der docs von Datentabellen können wir sehen, wie man Zeilen oder detaillierte Informationen zu jeder Zeile in unseren Daten (JSON/CSV-Datei) hinzufügen kann. Allerdings möchte ich keinen Erweiterungsbutton, die Erweiterung ist leer wie die ersten beiden Dateneinträge. Dies ist, was ich arbeite mit:

Javascript

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

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "ajax": "../ajax/data/objects.txt", 
     "columns": [ 
      { 
       "className":  'details-control', 
       "orderable":  false, 
       "data":   null, 
       "defaultContent": '' 
      }, 
      { "data": "name" }, 
      { "data": "position" }, 
      { "data": "office" }, 
      { "data": "salary" } 
     ], 
     "order": [[1, 'asc']] 
    }); 

    // Add event listener for opening and closing details 
    $('#example tbody').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(format(row.data())).show(); 
      tr.addClass('shown'); 
     } 
    }); 
}); 

HTML

<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th></th> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th></th> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
    </table> 

JSON

{ 
    "data": [ 
    { 
     "id": "1", 
     "name": "Tiger Nixon", 
     "position": "System Architect", 
     "salary": "$320,800", 
     "start_date": "2011/04/25", 
     "office": "Edinburgh", 
     "extn": "" 
    }, 
    { 
     "id": "2", 
     "name": "Garrett Winters", 
     "position": "Accountant", 
     "salary": "$170,750", 
     "start_date": "2011/07/25", 
     "office": "Tokyo", 
     "extn": "" 
    }, 
    { 
     "id": "3", 
     "name": "Ashton Cox", 
     "position": "Junior Technical Author", 
     "salary": "$86,000", 
     "start_date": "2009/01/12", 
     "office": "San Francisco", 
     "extn": "1562" 
    }, 
    { 
     "id": "4", 
     "name": "Cedric Kelly", 
     "position": "Senior Javascript Developer", 
     "salary": "$433,060", 
     "start_date": "2012/03/29", 
     "office": "Edinburgh", 
     "extn": "6224" 
    }, 
    ] 

Wie Sie kann sehen, dass sowohl Eintrag 1 als auch 2 eine leere Erweiterung haben, und hier möchte ich nicht, dass die Maximierungsschaltfläche überhaupt angezeigt wird, nur Leerzeichen. Die anderen beiden, bei denen die Erweiterung nicht leer ist, sollten weiterhin die Schaltfläche zum Anzeigen dieser Informationen enthalten.

Answer 1

Sie können createdRow() verwenden, um den Inhalt der Detailzelle (oder Zellen) zu überprüfen, und die details-control Klasse bedingt hinzufügen, wenn diese Zelle nicht leer ist.

Zum Beispiel überprüft, dies zu sehen, ob das extn Feld einen nicht leeren Wert hat

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
    "data": data.data, 
    "columns": [{ 
     "orderable": false, 
     "data": null, 
     "defaultContent": '' 
    }, { 
     "data": "name" 
    }, { 
     "data": "position" 
    }, { 
     "data": "office" 
    }, { 
     "data": "salary" 
    }], 
    "order": [ 
     [1, 'asc'] 
    ], 
    "createdRow": function(row, data, dataIndex) { 
     if (data.extn !== "") { 
     $(row).find("td:eq(0)").addClass('details-control'); 
     } 
    } 
    }); 

ist hier eine Fiddle Demo: https://jsfiddle.net/zephyr_hex/rhgL0294/20/