DataTable FixedHeader не работает
У меня есть всплывающее окно, в котором я показываю DataTable:
<div data-role="popup" id="infoParticelleDesktop" class="popupTopLeft" data-theme="a" data-overlay-theme="a">
<table id="tableParticelleE" class="row_border" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Sub</th>
<th>PM</th>
...
</tr>
</thead>
<tbody></tbody>
</table>
</div>
var oTable = $(tableId).dataTable({
"fixedHeader": true,
"bFilter": true,
"bInfo": false,
"bDestroy": true,
"aaData": dataTablePa,
"bPaginate": false,
"bSort": false,
"bAutoWidth": false,
"aoColumns": colPa,
"dom": 'Zlfrtip',
"fnRowCallback": function (nRow, aData) {
var $nRow = $(nRow);
$nRow.css({ "background-color": "#FFbd4f", "text-shadow": "none" });
return nRow;
}
});
oTable.fixedHeader.enable(true);
В этой таблице у меня также есть кнопка, и когда вы нажимаете один, под первой появляется другая таблица:
$(tableId + ' tbody td img').on('click', function () {
var nTr = $(this).parents('tr')[0];
var nTds = this;
if (oTable.fnIsOpen(nTr)) {
this.src = "Images/plus.png";
oTable.fnClose(nTr);
}
else {
var rowIndex = oTable.fnGetPosition($(nTds).closest('tr')[0]);
var detailsRowData = dataTablePa[rowIndex].proprietari;
this.src = "Images/minus.png";
oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, tableProprietari), 'proprietari');
oInnerTable = $("#tableParticelle_" + iTableCounter).dataTable({
"bFilter": false,
"aaData": detailsRowData,
"bSort": false,
"bInfo": false,
"bPaginate": false,
"bAutoWidth": false,
"aoColumns": colPr
});
iTableCounter = iTableCounter + 1;
}
});
Таблица может иметь много строк и может быть очень длинной. У меня максимальная высота всплывающего окна и вертикальная полоса прокрутки. Я бы хотел, чтобы заголовок основной таблицы был зафиксирован сверху. Поэтому после этого я добавил fixedHeader, но ничего не меняется.