DataTable 将隐藏列显示为行，如 https://datatables.net 头版

Question

我在使用 DataTable 时遇到了问题。我期望实现的输出类似于 DataTables.net 上的第一个示例，当您单击加号图标时，您可以看到隐藏列中的一些信息作为一行。

我有一个返回此结构的数据数组的 api

[
  {id: 1, 
   state: { name: text, ...},
   user: { name: text, last_name: text},
   fail: 0, (default)
   reason: text (null when fail = 0), 
   description: text (null when fail = 0), 
   requirements: text (null when fail = 0),
   created_at: date
  }
]

在某些情况下有时会填写原因、描述和要求列，我想在单击加号按钮后显示该信息。

Ajax 请求完成后，我正在用 Javascript 填充表格。我一开始只有三列显示state.name、user.name + user.lastname和created_at。

var html = '';
for(var i = 0; i < states.length; i++){
 var state = states[i];
 html += '<tr>';
 html += '<td>'+ state.state.name + '</td>';
 html += '<td>'+ state.user.name + ' '+ state.user.last_name + '</td>';
 html += '<td>'+ state.created_at + '</td>';
 html += '</tr>';
}
if($.fb.DataTable.isDataTable('#table-states')){
 $('#table-states').DataTable().clear().destroy();
}
$('#table-states tbody').html(html).DataTable({
 "scrollY": '200px',
 "scrollCollapse': true,
 "paging": false,
 "searching": false,
 "info": false
});

这工作得很好，但是当我尝试使用动态行添加其他 3 列时，我开始遇到问题。我所做的是改变 for 循环。

var html = '';
for(var i = 0; i < states.length; i++){
 var state = states[i];
 html += '<tr>';
 html += '<td>'+ state.state.name + '</td>';
 html += '<td>'+ state.user.name + ' '+ state.user.last_name + '</td>';
 html += '<td>'+ state.created_at + '</td>';
 html += '</tr>';
 if(state.fail){
  html += '<tr class="hide"><td colspan="3">';
  html += '<strong>Reason:</strong> ' + state.reason +'<br>';
  html += '<strong>Description:</strong> ' + state.description + '<br>';
  html += '<strong>Requirements:<strong> ' + state.requirements;
  html += '</td></tr>';
 }
}

我还添加了按钮和面向事件的编程来相应地显示或隐藏行。我现在遇到的问题是，我为初始化 DataTable 传递的选项不再被考虑在内，并且我不再有 200px 的滚动高度，考虑到我有时可能拥有的行数，这一点至关重要。

请帮助实现这一结果，希望使用 columnDefs 作为 DataTable 的首页显示或使用 javascript，因为我正在尝试

Answer 1

查看this Link 显示数据表中显示和隐藏行的示例。