添加滚动后,数据表标题消失

时间:2016-10-06 09:49:17

标签: jquery datatables

我的表格看起来很好,直到我像这样添加滚动:

dom: 'ACBlf<"clear">rtip',
colVis: {
    exclude: [1]
},
"scrollY": '50vh',
"scrollCollapse": true,
"paging": false,
"scrollX": true,
buttons: [
    'copyHtml5',
    'excelHtml5',
    'csvHtml5',
    'pdfHtml5'
],

然后标题消失在页面上。我在这里做错了什么?

 <div id="divAllReviews">
        <div class="tooltip"><span class="tooltiptext" style="font-size:small;">Click on first column to view details, click here to reload table</span><a href="javascript:ReloadTable('tblAllReviews');"><i style="font-size:xx-small !important">(Click on first column to view details, click here to reload table)</i></a></div>
        <table id="tblAllReviews" style="font-size:small;display:none" class="tableClick">
            <thead>
                <tr>
                    <th>ID</th>
                    <th><div class="tooltip"><span class="tooltiptext" style="font-size:small;">Sort by Name</span>Name</div></th>
                    <th><div class="tooltip"><span class="tooltiptext" style="font-size:small;">Sort by Name</span>Name</div></th>
                    <th><div class="tooltip"><span class="tooltiptext" style="font-size:small;">Sort by ID#</span>ID#</div></th>
                    <th><div class="tooltip"><span class="tooltiptext" style="font-size:small;">Sort by Location</span>Location</div></th>
                    <th><div class="tooltip"><span class="tooltiptext" style="font-size:small;">Sort by Review Date Opened</span>Opened</div></th>
                    <th><div class="tooltip"><span class="tooltiptext" style="font-size:small;">Sort by Review Date Closed</span>Closed</div></th>
                    <th><div class="tooltip"><span class="tooltiptext" style="font-size:small;">Sort by Review Owner</span>Owner</div></th>
                </tr>
            </thead>
        </table>
    </div>

CSS:

 .tooltip {
    position: relative;
    display: inline-block;
}
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 250px;
        background-color: lightyellow;
        color: black;
        border:1px solid black;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
    }
    .tooltip:hover .tooltiptext {
        visibility: visible;
        top: -5px;
        left: 105%;
    }
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.dataTables_processing {
    z-index: 1000;
}
.dataTables tbody tr {
    height: 35px;
}
.dataTables_scroll {
    overflow: auto;
}

 $("#tblAllReviews").dataTable({
                            bProcessing: true,
                            sAjaxSource: '@Url.Action("GetAllReviews")',
                            bJQueryUI: true,

                            //dom: 'Tlf<"clear">rtip',
                            dom: 'ACBlf<"clear">rtip',
                            colVis: {
                                exclude: [0]
                            },
                            "scrollY": '50vh',
                            "scrollCollapse": true,
                            "paging": false,
                            "scrollX": true,
                            buttons: [
                                'copyHtml5',
                                'excelHtml5',
                                'csvHtml5',
                                'pdfHtml5'
                            ],
                            bAutoWidth: false,
                            "oLanguage": {
                                sEmptyTable: "There are no Open Reviews at this time",
                                sProcessing: "Processing, Please Wait...",
                            },
                            "aoColumns": [
                                { "sWidth": "1%", sClass: "smallFonts" },
                                {
                                    "sWidth": "20%", sClass: "smallFonts", "mRender": function (data, type, row) {
                                        return "<div class='tooltip'>" + row[1] + "<span class='tooltiptext'>Click to view " + row[2] + "'s Review details</span></div>";
                                    }
                                },
                                { "sWidth": "1%", sClass: "smallFonts" },
                                { "sWidth": "15%", sClass: "smallFonts" },
                                { "sWidth": "20%", sClass: "smallfonts" },
                                { "sWidth": "15%", sClass: "smallfonts" },
                                { "sWidth": "15%", sClass: "smallfonts" },
                                { "sWidth": "15%", sClass: "smallfonts" }
                            ],
                            tableTools: {
                                "sSwfPath": "../../Scripts/swf/copy_csv_xls_pdf.swf",
                                "aButtons": [
                                    {
                                        "sExtends": "print",
                                        "bShowAll": true
                                    }
                                ]

                            }
                        });
                        otab = $("#tblAllReviews").dataTable();
                        otab.fnSort([[1, 'asc']]);
                        $('#tblAllReviews tbody').on('click', 'td', function () {
                            var visIdx = $(this).index();
                            if (visIdx != 0) {
                                return false;
                            }
                            var par = this.parentNode.parentNode.id;
                            var oTable = $("#tblAllReviews").dataTable();
                            var aPos = oTable.fnGetPosition(this);
                            var aData = oTable.fnGetData(aPos[0]);
                            var name = aData[0];
                            if (name != '') {
                                GetReview(name);
                            }
                            else {
                                ErrorDialog("#MessageDialog", "#lblError", "The Review ID is blank in that row.", "No Review ID");
                                return false;
                            }
                        });
                        $("#tblAllReviews").dataTable().fnSetColumnVis(0, false);
                        $("#tblAllReviews").dataTable().fnSetColumnVis(2, false);

0 个答案:

没有答案