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的滚动高度，考虑到我有时可以拥有的行数，这是至关重要的。

请帮助实现此结果，希望在DataTable的首页显示时使用columnDefs或在尝试时使用javascript

Answer 1

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

数据表将列隐藏为行，例如https://datatables.net头版

1 个答案: