2レベルの消耗品データテーブル

Question

私はdatatableを扱っています。今、私は

https://www.datatables.net/examples/api/row_details.html

を使用しています。しかし、問題はここにある私たちは、一度だけ費やすことができますが、私はそれが2時間消耗したいです。この問題を解決する方法

。

ありがとうございます。

Answer 1

私は上記のリンクからすべてのコードを使用しました。https://www.datatables.net/examples/api/row_details.htmlを修正しました。これが役立つことを願って...

  <style> 
     td.details-control { 
      background: url('images/details_open.png') no-repeat center center; 
      cursor: pointer; 
     } 
     tr.shown td.details-control { 
      background: url('images/details_close.png') no-repeat center center; 
     } 

     td.details-control2 { 
      background: url('images/details_open.png') no-repeat center center; 
      background-position: top; 
      cursor: pointer; 
     } 
     tr.shown td.details-control2 { 
      background: url('images/details_close.png') no-repeat center center; 
      background-position: top; 
     }    

    </style> 
    <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> 
     /* 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 class=details-control2></td>'+ 
       '<td>Extra Info</td>'+ 
      '</tr>'+ 
     '</table>'; 
    } 

    /* Formatting function for row details - modify as you need */ 
    function format2 (d) { 
     // `d` is the original data object for the row 
     return '<br/><br/><table cellpadding="5" cellspacing="0" border="0" style="padding-left:250px;">'+ 
      '<tr>'+ 
       '<td>Start Date:</td>'+ 
       '<td>'+d.start_date+'</td>'+ 
      '</tr>'+ 
      '<tr>'+ 
       '<td>Position:</td>'+ 
       '<td>'+d.position+'</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'); 
      } 
     }); 


     // Add event listener for opening and closing details 
     $('#example tbody').on('click', 'td.details-control2', function() { 

      var tr1 = $(this).closest('table').closest('tr'); 

      var trData = tr1.prev(); 

      var rowData = table.row(trData);  

      if($(this).parent().hasClass("shown")) { 
       $(this).parent().removeClass('shown'); 
       $(this).siblings('td').text('Extra Info:'); 
      } 
      else {     
       $(this).siblings('td').append(format2(rowData.data())); 
       $(this).parent().addClass('shown'); 
      } 

     });  

    });