DataTable отображает скрытые столбцы в виде строк, как на https://datatables.net титульной странице - PullRequest
Новая
       12

DataTable отображает скрытые столбцы в виде строк, как на https://datatables.net титульной странице

0 голосов
/ 19 февраля 2019

У меня возникли проблемы при работе с 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
  }
]

Причина, описание и требования к столбцам иногда заполняются при определенных случаях, и я хотел бы отобразить эту информацию после нажатия кнопки «плюс».

Я заполнил таблицу Javascript, как только запрос Ajax был выполнен.Вначале у меня было всего три столбца для отображения state.name, user.name + user.lastname и create_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, как я пытался

1 Ответ

0 голосов
/ 19 февраля 2019

Посмотрите на эту ссылку , показывающую пример отображения и скрытия строки в таблице данных.

...