我使用2个javascript插件:floathead和excel -like- bootstrap - table - sorting - filter - plugin
粘头工作得很好，直到您尝试过滤行。当页面位于顶部时，您只能在表标题中看到div。一旦标题移动了，过滤器按钮就不会显示任何内容
我做了一个例子在JS提琴(完整的代码也在下面-只是重复行有一定的数量):
https://jsfiddle.net/9713qa6n/
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-style.css" />
<link type="text/css" rel="stylesheet" href="" />
<link type="text/css" rel="stylesheet" href="" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.2.4/jquery.floatThead.min.js"></script>
</head>
<body>
<!-- Table to be filtered with a sticky header -->
<table id="table" class="table table-bordered table-intel sticky-header">
<!-- Header that should remain sticky and having filters -->
<thead>
<tr class="table-info">
<th>Animal</th>
<th>Class</th>
<th>Collective Noun</th>
</tr>
</thead>
<!-- Body of the table that should be filtered -->
<tbody>
<tr>
<td>Bear</td>
<td>Mammal</td>
<td>Sleuth</td>
</tr>
<tr>
<td>Ant</td>
<td>Insect</td>
<td>Army</td>
</tr>
<tr>
<td>Salamander</td>
<td>Amphibian</td>
<td>Congress</td>
</tr>
<tr>
<td>Owl</td>
<td>Bird</td>
<td>Parliament</td>
</tr>
........
</tbody>
</table>
<script type="text/javascript">
// Use the plugin once the DOM has been loaded.
$(function () {
// Apply the plugin
$('#table').excelTableFilter();
$('.sticky-header').floatThead({
position: 'absolute'
});
});
</script>
</body>
</html>
我不知道如何解决这个问题。非常欢迎任何帮助!
Misha Koryak的回答
这不是这个过滤器的错，它们不能被期望处理其他插件对DOM所做的事情。这里有一个丑陋的方法可以解决你的问题:https://jsfiddle.net/08hf4pdt/它也使平头插件的保修无效，但我怀疑你关心:)
$(function () {
// Apply the plugin
$('#table').excelTableFilter();
$('.sticky-header').floatThead({
position: 'absolute'
}).closest('.floatThead-wrapper').find('.floatThead-container').css('overflowX', 'visible');
});