Question

fixedHeader不起作用所有其他功能都正常工作

我试图删除其他功能以查看是否有帮助。但仍然没有用。我想知道我在页面上使用的任何其他DataTable功能是否存在冲突。有没有办法找到问题所在？

<!DOCTYPE html>
<html>
<head>
<title>Pico SON Process Tracking Data Table</title>
<style>
th, td, p, input,tfoot {
font:10px Verdana;
}
table, th, td 
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px;
text-align: center;
}
th {
font-weight:bold;
}
td.highlight {
font-weight: bold;
color: blue;
}    
tfoot {
display: table-header-group;
}
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
} 
div.ColVis {
float: left;
}
</style>
<link rel="shortcut icon" type="image/png" href="csonpnp.jpg">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">  
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
</head>
<body>  
<h1 style="text-align:center;">Pico SON Process Tracking Data Table</h1>
<table id="example" class="display" width="100%">
<tfoot>
<tr>
<th>Engineering number</th>
<th>Site name</th>
<th>Cluster</th>
<th>eNodeB ID</th>
<th>Cell ID</th>
<th>Cell name</th>
<th>Admin state</th>
<th>First day of SON</th>
<th>Days with SON</th>
<th>First day of NEW</th>
<th>Days with NEW</th>
<th>SON failures</th>
<th>User</th>
<th>Last action</th>
<th>NRM Antenna availability</th>
<th>First day NRM Antenna check</th>
</tr>
</tfoot>
</table>
</body>
<script>


var dataSet=[];
var datahead=[];

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var text = JSON.parse(this.responseText);
var myBooks = [text];
var col = ["engnum","engloc", "engclust","eNodeB ID", "Cell ID", "cellname", "adminstate","initdateSON", "SD", "initdateNEW", "ND", "sonfailed","user", "lastaction", "antenna", "antennaprechk"];

datahead.push({title:"Engineering number"},{ title:"Site name"},{title:"Cluster"},{title:"eNodeB ID"}, {title:"Cell ID"}, {title:"Cell name"}, {title:"Admin state"},{ title:"First day of SON"}, {title:"Days with SON"}, {title:"First day of NEW"}, {title:"Days with NEW"} , {title:"SON failures"},{ title:"User"}, {title:"Last action"},{ title:"NRM Antenna availability"}, {title:"First day NRM Antenna check"});


var n=0;
for (var dkey in myBooks[0]) {
dataSet.push([]);
for (var j in col) {
if (myBooks[0][dkey][col[j]] == undefined){
(dataSet[n]).push("");
}else{
(dataSet[n]).push(myBooks[0][dkey][col[j]]);
}
}
n=n+1;
}
$(document).ready(function() {  
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var table =$('#example').DataTable( {
data: dataSet,
columns: datahead,
fixedHeader: true,
dom:            "Bfrtip",
buttons:        [ 'colvis' ],
select:         true,
paging:   false,
"order": [[ 7, "desc" ]],
"createdRow": function ( row, data, index ) {
if ( data[8] > 0 && data[9] == "") {
$('td', row).addClass('highlight');
}
},
"columnDefs": [{ "width": "1%", "targets": [0,1,2,3,4,6,8,10,12,14,15] }]
} );
table.columns().every( function () {
var that = this;             
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that.search( this.value ).draw();
}
} );
} );            
} );
}
};
xmlhttp.open("GET", "datafile.json", true);
xmlhttp.send();         
</script>
</html>

没有错误消息，其余功能正常工作

DataTable fixedHeader功能不起作用

0 个答案: