dataTable - need header row to be fixed - datatables

Question

data table header moves with the table. i tried adding into my code what the Similar Questions had to offer, and more. Nothing seems to work. Can someone view my code and offer suggestions on how to fix the header row? code:
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.css">
<div id="p" class="easyui-panel" title="LP Activity Counts" style="width:1150px;height:500px;padding:0px;">
<table cellpadding="5" cellspacing="0" border="0" id="example" width="100%" class="display">
<thead>
<tr>
<th >FY</th>
<th width="25%">County</th>
<th align="center" style="background-color:white;">Overage</th>
<th align="center" style="background-color:white;">Updated</th>
<th align="center" style="background-color:white;">New</th>
<th align="center" style="background-color:white;">Deleted</th>
<th align="center" style="background-color:white;">Total</th>
<th align="center" style="background-color:white;">Auto</th>
<th align="center" style="background-color:white;">ABS</th>
<th align="center" style="background-color:white;">Needs Fix</th>
<th align="center" style="background-color:white;">Review</th>
<th align="center" style="background-color:white;">Available</th>
<th align="center" style="background-color:white;">FYI</th>
<th align="center" style="background-color:white;">Action</th>
<th align="center" style="background-color:white;">Required</th>
<th align="center" style="background-color:white;">Suspend</th>
<th align="center" style="background-color:white;">Term</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="11" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
var FY = <?php echo $FY; ?>;
var USERID = <?php echo $CMSUserID; ?>
var oTable = jQuery('#example').dataTable( {
"bRetrieve":true,
"bFilter": false,
"bInfo" : false,
"bLengthChange" : false,
"bAutoWidth":true,
"bServerSide": true,
"bPaginate" : false,
"bSort" : false,
"aoColumnDefs": [ { "sClass": "act_counts", "aTargets": [ 2 ] },
{ "sClass": "act_counts", "aTargets": [ 3 ] },
{ "sClass": "act_counts", "aTargets": [ 4 ] },
{ "sClass": "act_counts", "aTargets": [ 5 ] },
{ "sClass": "act_counts", "aTargets": [ 6 ] },
{ "sClass": "approval", "aTargets": [ 7 ] },
{ "sClass": "approval", "aTargets": [ 8 ] },
{ "sClass": "approval", "aTargets": [ 9 ] },
{ "sClass": "submittal", "aTargets": [ 10 ] },
{ "sClass": "submittal", "aTargets": [ 11 ] },
{ "sClass": "flags", "aTargets": [ 12 ] },
{ "sClass": "flags", "aTargets": [ 13 ] },
{ "sClass": "flags", "aTargets": [ 14 ] },
{ "sClass": "flags", "aTargets": [ 15 ] },
{ "sClass": "flags", "aTargets": [ 16 ] },
],
"sAjaxSource": "https://domain/production/dashboard.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "FY", "value": FY } );
aoData.push( { "name": "lpid", "value": "1" } );
aoData.push( { "name": "USERID", "value": USERID } );
},
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "Excel"
}, "copy"
]
}
} );
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table );
} );

Answer 1

Give or take a few settings this should accomplish what you are trying to including fixed header
var oTable = $('#example').DataTable({
"autoWidth": true,
"processing": true,
"serverSide": true,
"sort": false,
"fixedHeader":true,
"columnDefs": [{ "className": "act_counts", "targets": [2,3,4,5,6] },
{ "className": "approval", "targets": [7, 8, 9] },
{ "className": "submittal", "targets": [10, 11] },
{ "sClass": "flags", "aTargets": [12, 13, 14, 15, 16] },
],
"ajax":{url: "https://domain/production/dashboard.php",
"data": function (aoData) {
aoData.extra = [];
aoData.extra.push({ "name": "FY", "value": FY });
aoData.extra.push({ "name": "lpid", "value": "1" });
aoData.extra.push({ "name": "USERID", "value": USERID });
}
},
// from what I see, no paging, no filtering, no paging info and no page length, now all done with the dom
"dom": 'Bt',
"buttons": ["excelHtml5", "copyHtml5"]
});
The DataTable CDN and Download builder gives you the option as doing it as one file link but I listed them individually so you can see what they are. It looked to me that you might have been missing the button includes. I included ones for html5
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>