我正在使用Jquery Datatables并遇到fixedHeader选项的问题：
标题here添加fixedHeader: true标记后，标题不会像预期的那样冻结：
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>
Schedule Match
| Upstream Commerce</title>
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script type="text/javascript" src="/static/script/site_filter.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<style type="text/css">
tfoot {
display: table-header-group;
}
html {
width: 57.5%;
}
input:checked {
height: 17px;
width: 17px;
}
</style>
</head>
<body>
<img id="loader" src="/static/img/loader_animation_large.gif"
style="
width:36px;
height:36px;
display: none;
position:absolute;
top:50%;
left:50%;
margin-top:-18px;
margin-left:-18px;"/>
<p><a href="/accounts/logout/">Logout</a> | <a href="/accounts/profile/">Home</a></p>
<table id='pm_table' class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Site id</th>
<th>Site name</th>
<th>Priority</th>
<th>Schedule</th>
<th>Last run time</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Site id</th>
<th>Site name</th>
<th>Priority</th>
<th>Schedule</th>
<th>Last run time</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><span>537</span></td>
<td><span>kobo_us</span></td>
<td><span>90</span></td>
<td><span>1</span></td>
<td><span>1970-01-13 20:38:31</span></td>
</tr>
<tr>
<td><span>553</span></td>
<td><span>kobo_uk</span></td>
<td><span>90</span></td>
<td><span>1</span></td>
<td><span>1970-02-08 13:55:33</span></td>
</tr>
<tr>
<td><span>562</span></td>
<td><span>kobo_au</span></td>
<td><span>80</span></td>
<td><span>1</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>1861</span></td>
<td><span>alliance_entertainment</span></td>
<td><span>55</span></td>
<td><span>0</span></td>
<td><span>1970-04-01 00:29:37</span></td>
</tr>
<tr>
<td><span>1845</span></td>
<td><span>ubs.com</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>611</span></td>
<td><span>officebrands</span></td>
<td><span>75</span></td>
<td><span>1</span></td>
<td><span>1970-03-19 03:51:06</span></td>
</tr>
<tr>
<td><span>512</span></td>
<td><span>cos.net.au</span></td>
<td><span>70</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>1853</span></td>
<td><span>debonix.fr</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>-104</span></td>
<td><span>bestonix</span></td>
<td><span>100</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>1813</span></td>
<td><span>destination_reward</span></td>
<td><span>30</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>1794</span></td>
<td><span>petco_new</span></td>
<td><span>10</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>1940</span></td>
<td><span>eventyrsport.dk</span></td>
<td><span>30</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>746</span></td>
<td><span>burketts</span></td>
<td><span>90</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>735</span></td>
<td><span>sigmapharmaceuticals</span></td>
<td><span>34</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>651</span></td>
<td><span>ulta_new</span></td>
<td><span>50</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>767</span></td>
<td><span>markertek.com</span></td>
<td><span>90</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>304</span></td>
<td><span>lakeland.co.uk</span></td>
<td><span>46</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>459</span></td>
<td><span>smythstoys.ie</span></td>
<td><span>5</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>453</span></td>
<td><span>smythstoys.com</span></td>
<td><span>5</span></td>
<td><span>0</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>1902</span></td>
<td><span>toysrus.uk</span></td>
<td><span>5</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>573</span></td>
<td><span>toysrus.es</span></td>
<td><span>10</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>209</span></td>
<td><span>rockbottomgolf.com</span></td>
<td><span>333</span></td>
<td><span>0</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>2949</span></td>
<td><span>free_people</span></td>
<td><span>50</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>2964</span></td>
<td><span>shopbop_ch</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>2974</span></td>
<td><span>shopbop_sk</span></td>
<td><span>50</span></td>
<td><span>1</span></td>
<td><span>2016-11-07 14:36:27</span></td>
</tr>
<tr>
<td><span>2975</span></td>
<td><span>shopbop_au</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>2976</span></td>
<td><span>shopbop_hk</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>2977</span></td>
<td><span>shopbop_tai</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>2978</span></td>
<td><span>shopbop_uk</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>2979</span></td>
<td><span>shopbop_jap</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>2980</span></td>
<td><span>shopbop_fr</span></td>
<td><span>50</span></td>
<td><span>1</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3019</span></td>
<td><span>zooroyal</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3050</span></td>
<td><span>hhgregg</span></td>
<td><span>50</span></td>
<td><span>1</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3121</span></td>
<td><span>gopro</span></td>
<td><span>50</span></td>
<td><span>1</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3199</span></td>
<td><span>groupon_uk_demo</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3206</span></td>
<td><span>groupon_fr_demo</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3215</span></td>
<td><span>partycity</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3294</span></td>
<td><span>silver_star</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3349</span></td>
<td><span>asos_uk</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3353</span></td>
<td><span>mango</span></td>
<td><span>333</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3372</span></td>
<td><span>netshoes</span></td>
<td><span>53</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr> <tr>
<td><span>3019</span></td>
<td><span>zooroyal</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3050</span></td>
<td><span>hhgregg</span></td>
<td><span>50</span></td>
<td><span>1</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3121</span></td>
<td><span>gopro</span></td>
<td><span>50</span></td>
<td><span>1</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3199</span></td>
<td><span>groupon_uk_demo</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3206</span></td>
<td><span>groupon_fr_demo</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3215</span></td>
<td><span>partycity</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3294</span></td>
<td><span>silver_star</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3349</span></td>
<td><span>asos_uk</span></td>
<td><span>50</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3353</span></td>
<td><span>mango</span></td>
<td><span>333</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
<tr>
<td><span>3372</span></td>
<td><span>netshoes</span></td>
<td><span>53</span></td>
<td><span>0</span></td>
<td><span>-</span></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
// DataTable
var table = $('#pm_table').DataTable({
dom: 'l Bfrtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]],
"buttons": [],
"bFilter": false,
paging:false,
fixedHeader: true
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
</script>
</body>
</html>
我检查了包含，控制台没有显示任何错误。
我做错了什么？
答案 0 :(得分：0)
通过删除来自<style>部分的这些行来解决问题：
tfoot {
display: table-header-group;
}
答案 1 :(得分：0)
很可能您没有在代码中包含fixedHeader的CSS文件。请在页面顶部添加链接https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.css。它可以解决您的问题。