Datatables dataTable-需要固定标题行
数据表标题随表一起移动。我试着在我的代码中加入类似的问题，还有更多。似乎什么都不管用。是否有人可以查看我的代码并提供有关如何修复标题行的建议？代码：Datatables dataTable-需要固定标题行,datatables,fixed-header-tables,Datatables,Fixed Header Tables,数据表标题随表一起移动。我试着在我的代码中加入类似的问题，还有更多。似乎什么都不管用。是否有人可以查看我的代码并提供有关如何修复标题行的建议？代码： <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
<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 );
} );
FY
县
超龄
更新
新的
删除
全部的
自动的
防抱死制动系统
需要修理
复习
可用
供参考
行动
要求的
暂停
学期
从服务器加载数据
jQuery（文档）.ready（函数（）{
变量FY=；
var USERID=
var oTable=jQuery（'#示例'）。数据表（{
“bRetrieve”：没错，
“bFilter”：错误，
“bInfo”：假，
“bLengthChange”：false，
“bAutoWidth”：没错，
“bServerSide”：正确，
“bPaginate”：错误，
“bSort”：错误，
“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”：“批准”，“目标”：[7]}，
{“sClass”：“批准”，“目标”：[8]}，
{“sClass”：“批准”，“目标”：[9]}，
{“sClass”：“提交”、“目标”：[10]}，
{“sClass”：“提交”、“目标”：[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”：函数（aoData）{
推送（{“名称”：“FY”，“值”：FY}）；
推送（{“name”：“lpid”，“value”：“1”}）；
push（{“name”：“USERID”，“value”：USERID}）；
},
“sDom”：“Tlfrtip”，
“oTableTools”：{
“阿布顿”：[
{
“性倾向”：“csv”，
“sButtonText”：“Excel”
}“副本”
]
}
} );
变量表=$（“#示例”）.DataTable（）；
新的$.fn.dataTable.FixedHeader（表）；
} );
给予或接受一些设置这将完成您试图包括固定标题在内的内容
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"]
});
<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>