Question

我设法将它变成了live.datatables.net并且几乎正常工作，除了我无法将最后的细节显示为孩子。

行中的最后一行应显示＆＃34;消息信息：＆＃34; - 但我无法弄清楚如何让细节显示出来。我试图解决的问题是当前的DataTable没有正确排序日期 - 所以使用＆＃34; datetime-moment.js＆＃34;插件允许日期正确排序，但已经打破＆＃34;破坏＆＃34;如何＆＃34;隐藏＆＃34;孩子在工作。我已经把它弄到了这么远，但是我很难知道如何获得消息信息＆＃34;显示。

例如，第一个＆＃34; TR＆＃34;有＃＆＃34; TD＆＃34; of＆＃34; raUni = 71421861，action = U，beqUni = 1700538，rateCode = F-BAIT＆＃34; - 当用户点击＆＃34;显示/隐藏额外信息＆＃34;链接，它应该用＆＃34;消息信息打开每一行：raUni = 71421861，action = U，beqUni = 1700538，rateCode = F-BAIT＆＃34;。

有什么建议吗？

谢谢，迈克尔

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

  }

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

1 个答案: