詳細情報/子行をデータテーブル内の一部のエントリに追加

Question

データテーブルのdocsから、データ内のすべての行（JSON/CSVファイル）に子行または詳細情報を追加する方法がわかります。しかし、私は拡張ボタンが最初の2つのデータエントリのように空である拡張ボタンを望んでいません。これは、私が仕事で何：

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" 
    }, 
    ] 

エントリ1と2の両方が空の拡張子を持っているのを見ることができます。ここでは、展開ボタンがまったく表示されないようにしたいだけです。拡張子が空でない残りの2つには、この情報を表示するボタンが必要です。

Answer 1

createdRow()を使用して詳細セルの内容を確認し、そのセルが空でない場合は条件付きでdetails-controlクラスを追加できます。 https://jsfiddle.net/zephyr_hex/rhgL0294/20/