DataTables-使用Datetime-moment時子行不起作用

Question

我已經設法將它放入live.datatables.net並幾乎可以正常工作，除了我無法獲得要顯示為兒童的最后一個細節。

行的最后應該顯示“消息信息：”-但是我無法弄清楚如何顯示該詳細信息。 我要解決的問題是當前DataTable的Date排序不正確-因此使用“ datetime-moment.js”插件可以正確地對日期進行排序，但是“破壞”了“隱藏”的方式孩子正在工作。 到目前為止，我已經明白了，但是我對如何顯示“消息信息”感到困惑。

例如，第一個“ TR”的“ TD”為“ raUni = 71421861，action = U，beqUni = 1700538，rateCode = F-BAIT”-當用戶單擊“顯示/隱藏額外信息”鏈接時，用“消息信息：raUni = 71421861，action = U，beqUni = 1700538，rateCode = F-BAIT”打開每一行。

有什么建議么？

謝謝邁克爾

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

Answer 1

我找出了您的問題，並進行了一些更改。 我刪除了所有放入的div，因為它們不是有效的html。 在格式函數中，您永遠不會定義數據列，因此d.msgInfo不存在。 該行的數據位於數組中，因此在我修改的代碼中，其d [15]。

只是為了好玩，我為按鈕添加了一列以擴展單個行。 另外，我刪除了頂部的鏈接，並將其替換為表格底部的按鈕。

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>';

  }