dataTable - ligne d'en-tête à corriger

Question

L'en-tête du tableau de données se déplace avec la table. J'ai essayé d'ajouter à mon code ce que les questions similaires avaient à offrir, et plus encore. Rien ne semble fonctionner. Quelqu'un peut-il voir mon code et offrir des suggestions sur la façon de réparer la ligne d'en-tête? 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

donner ou prendre quelques paramètres cela devrait accomplir ce que vous essayez d'inclure en-tête fixe

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"] 
    }); 

Le constructeur DataTable CDN et téléchargement vous donne l'option que de le faire comme un lien de fichier mais je les ai énumérés individuellement afin que vous puissiez voir ce qu'ils sont. Il m'a semblé que vous aviez peut-être manqué le bouton comprend. Je les inclus pour 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>