데이터 테이블의 일부 항목에 자세한 정보/하위 행 추가

Question

데이터 테이블의 docs에서 우리는 데이터 (JSON/CSV 파일)의 모든 행에 하위 행이나 자세한 정보를 추가하는 방법을 볼 수 있습니다. 그러나 확장 버튼이 처음 두 데이터 항목처럼 비어있는 확장 버튼을 원하지 않습니다. 이다 나는 작업을 무엇을 :

자바 스크립트 당신으로

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가 모두 비어있는 확장자를 볼 수 있으며 여기서 확장 버튼이 전혀 보이지 않고 그냥 공백으로 표시되는 것을 원하지 않습니다. 확장자가 비어 있지 않은 나머지 두 개에는이 정보를 표시하는 버튼이 있어야합니다.

Answer 1

createdRow()을 사용하여 세부 셀 (또는 셀)의 내용을 검사하고 해당 셀이 비어 있지 않은 경우 조건부로 details-control 클래스를 추가 할 수 있습니다. 예를 들어

이는 extn 필드가 바이올린 데모 여기가 아닌 빈 값

$(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'); 
     } 
    } 
    }); 

을 가지고 있는지 여부를 확인합니다 : https://jsfiddle.net/zephyr_hex/rhgL0294/20/