DataTables - Datetime-momentを使用しているときに子ローが動作しない

Question

私はlive.datatables.netにこれを取得しています。ほとんどの場合、最後の詳細を子として表示することはできません。

最後の行は「メッセージ情報：」と表示されるはずですが、その詳細を表示する方法を理解できません。私が解決しようとしている問題は、現在のDataTableが日付の並べ替えを正しくしていないことです。 - "datetime-moment.js"プラグインを使用すると日付を正しく並べ替えることができますが、子供は働いている。私はこれまでこれを得ていましたが、私は "Message Info"を表示する方法を悩まされています。

たとえば、最初の「TR」は「raUni = 71421861、action = U、beqUni = 1700538、rateCode = F-BAIT」の「TD」を持ちます。ユーザーが「余分な情報の表示/非表示」をクリックすると、リンクをクリックすると、「Message Info：raUni = 71421861、action = U、beqUni = 1700538、rateCode = F-BAIT」という各行が開きます。

提案がありますか？

おかげで、マイケル

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

Answer 1

私はあなたの問題を考え出したし、同様にいくつかの変更を行いました。 有効なhtmlではないので、入力したすべてのdivを削除しました。 フォーマット関数では、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>'; 

    }