У меня есть DataTable, где у меня есть несколько скрытых столбцов с использованием параметра responsive
, а также фиксированный столбец с использованием параметра fixedColumns
. Проблема в том, что при отображении скрытого содержимого строки в фиксированном столбце не работают должным образом, как вы можете видеть на следующем изображении

В конфигурации dataTable у меня есть следующее:
var table = $('.data-table').DataTable({
responsive: {
// https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer
details: {
renderer: function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col, i ) {
return col.hidden ?
'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
'<td>'+col.title+':'+'</td> '+
'<td>'+col.data+'</td>'+
'</tr>' :
'';
} ).join('');
return data ?
$('<table/>').append( data ) :
false;
},
}
},
"columnDefs":[
{
"width": "auto",
"orderable": orderable,
"targets": 'col-actions'
},
{
"width": "auto",
"targets": '_all'
}
],
fixedColumns: {
leftColumns: 0,
rightColumns: fixed,
},
})
И таблица таким образом: (Я не помещаю весь tbody
, потому что это foreach
, а также в структуре это то же самое, что thead
)
<table id="user-table" class="table table-hover table-in-card data-table">
<thead>
<tr>
<th scope="col" class="all col-actions text-center"><i class="fas fa-eye"></i></th>
<!-- hidden -->
<th scope="col" class="none hidden-column">{{ __( 'general.created_at' ) }}</th>
<th scope="col" class="none hidden-column">{{ __( 'general.created_by' ) }}</th>
<th scope="col" class="none hidden-column">{{ __( 'general.updated_at' ) }}</th>
<th scope="col" class="none hidden-column">{{ __( 'general.updated_by' ) }}</th>
<!-- end hidden -->
<th scope="col" class="all">{{ __( 'customer.identifier') }}</th>
<th scope="col" class="all">{{ __( 'customer.full-name') }}</th>
<th scope="col" class="all">{{ __( 'customer.contact_information-label' ) }}</th>
<th scope="col" class="all">{{ __( 'customer.email') }}</th>
<th scope="col" class="all field-date">{{ __( 'customer.date_of_birth-label') }}</th>
<th scope="col" class="all">{{ __( 'customer.category' ) }}</th>
<th scope="col" class="all">{{ __( 'customer.subcategory-label' ) }}</th>
<th scope="col" class="all col-actions">Acciones</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
Среди нескольких вещей, которые я пытался сделать, наиболее близким к решению, который я когда-либо был, является использование события responsive-display
(https://datatables.net/reference/event/responsive-display) dataTable, но я не могу наконец получить доступ к nodes
внутри DOM:
table.on('responsive-display', function ( e, datatable, row, showHide, update ){
var trs = $('.DTFC_Cloned tr');
trs.each(function(){
var tr = $(this);
var trIndex = tr.attr('data-dt-row');
if( trIndex == row.index() && showHide ) {
tr.css('height', 250)
} else if ( trIndex == row.index() && !showHide ){
tr.css('height', 'auto')
}
})
console.log(trs)
});
.DTFC_Cloned
- это фиксированная таблица с заголовком Actions в изображении. Вывод console.log (trs)
более или менее соответствует моим ожиданиям, но, как я уже сказал ранее, я не могу получить доступ к этим элементам внутри DOM

Единственный способ, которым он работает правильно, - это поместить скрытые столбцы после фиксированного столбца, но тогда он теряет эту функцию. И если я, например, поставлю fixedColumns: {rightColumns: 5}
, я получаю тот же результат при запуске, это не работает.
Заранее большое спасибо за любую помощь, которую вы можете оказать.