2016-05-04 6 views
0

Ich versuche, eine Datentabelle mit erweiterbaren und zusammenklappbar Zeilen ähnlich den Code hier zu implementieren:jQuery Datatables.net zusammenklappbare erweiterbare Reihen - Übergeben von Parametern

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

ich den Code bekommen habe, zu erweitern oder reduzieren die Zeilen funktionieren, aber ich habe Schwierigkeiten, die Werte der erweiterten Zeile an meine Funktion zu übergeben, wenn auf das Symbol Details.control geklickt wird. z.B. Nach dem Klicken auf das Erweiterungssymbol (Detailsteuerung) versuche ich, die Zeile zu erweitern und sie mit Daten zu füllen, die über eine Ajax-Anfrage erhalten wurden, abhängig von einigen der Daten der Elternzeilen. Daher müssen einige Daten der Elternzeilen an meinen Ajax-Anruf übergeben werden. Wie bekomme ich die Zeilen Daten. Mein Code ist wie unten folgt:

$('#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!'); 
     } 
    }); 
+0

Zuerst setzen Sie einen Breakpoint in der Nähe der Zeile Id und überprüfen Sie, was Sie in der Konsole zu Zeile .... –

Antwort

0

Nach der Datentabellen api Dokumentation Lesen durch und durch Versuch und Irrtum ich es geschafft, diese Funktion zu erhalten, indem Sie die folgenden Schritte aus:

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

besser, elegantere Lösungen sind willkommen. Prost.