我的表格看起来很好,直到我像这样添加滚动:
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);