javascript - DataTable FixedHeader が機能しない

Question

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 を追加しましたが、何も変わりません。