DataTables - Kind Zeilen arbeiten nicht bei der Verwendung von Datetime-Moment

Question

Ich habe es geschafft, dies in live.datatables.net und fast funktioniert, außer ich kann nicht das letzte Detail als Kind angezeigt bekommen.

Der letzte in den Zeilen sollte mit der "Message Info:" angezeigt werden - aber ich kann nicht herausfinden, wie dieses Detail angezeigt werden soll. Das Problem, das ich versuche zu lösen, ist die aktuelle DataTable ist nicht korrekt sortieren das Datum - so mit dem Plugin "datetime-moment.js" ermöglicht das Datum korrekt sortiert, hat aber "gebrochen", wie die "versteckt" Kind arbeitet. Ich habe es so weit gebracht, aber ich bin ratlos, wie ich die "Message Info" zur Anzeige bringen kann.

Zum Beispiel hat das erste "TR" das "TD" von "raUni = 71421861, action = U, beqUni = 1700538, rateCode = F-BAIT" - wenn der Benutzer auf "Zusätzliche Informationen anzeigen/ausblenden" klickt Link, sollte jede Zeile mit "Message Info: raUni = 71421861, Aktion = U, BeqUni = 1700538, RateCode = F-BAIT" öffnen.

Irgendwelche Vorschläge?

Danke, Michael

http://live.datatables.net/yavoradu/5/edit

Answer 1

dachte ich Ihre Fragen und machte auch einige Änderungen. Ich entfernte alle divs, die du eingibst, da sie kein gültiges HTML sind. In Ihrer Formatfunktion definieren Sie nie die Datenspalten, so dass d.msgInfo nicht existiert. Die Daten für die Zeile befinden sich in einem Array, also in meinem modifizierten Code d [15].

Nur zum Spaß habe ich eine Spalte für die Schaltflächen zum Erweitern einzelner Zeilen hinzugefügt. Außerdem habe ich Ihren Link oben entfernt und durch den Button am unteren Rand der Tabelle ersetzt.

http://live.datatables.net/bovonodi/1/edit

var table = $('#example').DataTable(
    { "columnDefs" : [ { "targets" : -1, "visible" : false, "name" : 'msg_info'} ], 
    "iDisplayLength" : 15, 
    dom:'tBp', 
    "aLengthMenu" : [ [15, 25, 50, 100, -1 ], [ 15, 25, 50, 100, "All" ] ], 
    "order" : [ [ 2, "desc" ] ], 
    columns:[ { 
      "className":  'details-control', 
      "orderable":  false, 
      "data":   null, 
      "defaultContent": '' 
     },null, null, null, null, null, null, 
      null, null, null, null, null, null, 
      null, null, null], 
    buttons:[{text:'Show Info', action:function(e, dt, node, config){ 

     if(node[0].innerText == "Show Info"){ 
      node[0].innerText = "Hide Info"; 
      hideShowExtraInfo(true); 
     } 
     else { 
      node[0].innerText = "Show Info"; 
      hideShowExtraInfo(false); 
     } 
    }}] 

}); 


$('#example tbody').on('click', 'td.details-control', function() { 
    var tr = $(this).closest('tr'); 
    var row = table.row(tr); 
    var td = $(this); 

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

}); 


function hideShowExtraInfo(doShow) { 
     var table = $('#example').DataTable(); 
     table.rows().every(function() { 

      console.log("Temp"); 
      var tr = $(this.node()); 
      var td = tr.children(".details-control"); 

      if (!doShow) { 
      // This row is already open - close it 
       this.child.hide(); 
       td.removeClass('shown'); 
      } else { 
       // Open this row 
       this.child(format(this.data())).show(); 
       td.addClass('shown'); 
      } 
     }); 
    } 

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>Message Info:</td><td>' 
     + d[15] 
     + '</td></tr></table>'; 

    }