DataTable FixedHeader无法正常工作

时间:2016-05-25 08:52:45

标签: javascript jquery datatable fixed-header-tables

我有一个弹出窗口,其中显示了一个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;
    }
});

该表可以有很多行,可以很长。我有一个弹出窗口的最大高度和一个垂直滚动条。我想将主表的标题固定在顶部。因此,在this之后,我添加了fixedHeader,但没有任何变化。

0 个答案:

没有答案