-1

数据表头随表移动。我尝试在我的代码中添加类似问题必须提供的内容等等。似乎没有任何效果。有人可以查看我的代码并就如何修复标题行提供建议吗？代码：

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

4

1 回答 1

0

提供或采取一些设置，这应该可以完成您尝试包含固定标题的内容

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

DataTable CDN 和下载构建器为您提供了将其作为一个文件链接执行的选项，但我将它们单独列出，以便您查看它们是什么。在我看来，您可能错过了包含的按钮。我包括了 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>
于 2017-05-22T21:49:15.267 回答