DataTables - дочерние строки, не работающие при использовании Datetime-момента

Question

Мне удалось получить это в live.datatables.net и почти работать, за исключением того, что я не могу получить последнюю деталь для отображения в качестве дочернего.

Последний в строках должен отображаться с сообщением «Информация о сообщении:» - но я не могу понять, как получить эту деталь, чтобы отобразить ее. Проблема, которую я пытаюсь решить, заключается в том, что текущий DataTable не правильно сортирует дату, поэтому использование плагина «datetime-moment.js» позволяет правильно сортировать дату, но «сломал», как «скрытые», ребенок работает. Я получил это так далеко, но я в тупике о том, как отобразить «Информацию о сообщении».

Например, первый «TR» имеет «TD» «raUni = 71421861, action = U, beqUni = 1700538, rateCode = F-BAIT» - когда пользователь нажимает кнопку «Показать/скрыть дополнительную информацию», link, он должен открыть каждую строку с помощью «Информация о сообщении: raUni = 71421861, action = U, beqUni = 1700538, rateCode = F-BAIT».

Любые предложения?

Спасибо, Майкл

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

Answer 1

я понял ваши вопросы и внесли некоторые изменения, а также. Я удалил все divs, которые вы ввели, поскольку они не являются действительными 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>'; 

    }