jQueryのDatatables.net折りたたみ拡張可能行 - 私はここのコードに似た拡張可能かつ折りたたみ可能な行のデータテーブルを実装しようとしています渡すパラメータ

Question

：

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

私が展開したり折りたたんだりするためのコードを得ています行は機能していますが、details.controlアイコンをクリックすると、展開された行の値を関数に渡すのが難しくなります。例えば。展開アイコン（details-control）をクリックすると、行を展開し、親行データの一部に応じてajaxリクエストを介して取得したデータを入力しようとしています。そのため、親行データの一部を自分のajax呼び出しに渡す必要があります。上記の行データを取得するにはどうすればいいですか？以下、次のように私のコードは次のとおりです。

$('#myTable').on('click', 'td.details-control', function() { 
    var tr = $(this).closest('tr'); 
    var row = oTable.row(tr); 
// need to get row data here somehow 
    var rowId = ????? 

    if (row.child.isShown()) { 
     // This row is already open - close it 
     row.child.hide(); 
     tr.removeClass('shown'); 
    } else { 
     // Open this row 
     format(row.child,rowid); 
     tr.addClass('shown'); 
    } 
}); 


    function format(callback, id) { 
    $.ajax({ 
     url: "@Url.Action("foo", "bar")/"+ id, 
     dataType: "json", 
     complete: function (response) { 
      var data = JSON.parse(response.responseText); 
      var thead = '', tbody = ''; 
      for (var key in data[0]) { 
       //thead += '<th>' + key + '</th>'; 
      } 

      $.each(data, function (i, d) { 
       for (var x = 0; x < d.length ; x++) 
       { 
        tbody += '<tr><td style="width:290px">' + d[x].Description + '</td><td style="width:210px">' + d[x].BalanceBroughtForward + '</td><td style="width:100px">' + d[x].Payments + '</td><td style="width:100px">' + 
       '</td></tr>'; 

       } 
      }); 
      callback($('<table>' + thead + tbody + '</table>')).show(); 
     }, 
     error: function() { 
      $('#output').html('Bummer: there was an error!'); 
     } 
    }); 

Answer 1

私は次を使用してこの作業を取得するために管理DataTableのAPIドキュメントを通って、試行錯誤によって読んだ後：

$('#myTable').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var row = oTable.row(tr); 
     var rowdata = (oTable.row(tr).data()); 
     if (row.child.isShown()) { 
      // This row is already open - close it 
      row.child.hide(); 
      tr.removeClass('shown'); 
     } else { 
      console.log(oTable.row(tr).data()); 
      // Open this row 
      format(row.child, oTable.row(tr).data()); 
      tr.addClass('shown'); 
     } 
    }); 

どれでも良く、よりエレガントなソリューション歓迎します。 乾杯。