JQuery FixedHeader功能

Question

在jsp页面上工作。第一行（标题）需要在向下滚动页面时冻结。 我试图使用JQuery提供的功能来实现它，但并不富有成效。 以下是示例代码： 参考：

<script type="text/javascript" src="<c:url value=" /resources/js/jquery-2.1.3.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/jquery.dataTables.min.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/dataTables.fixedHeader.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/dataTables.fixedHeader.min.js "/>"></script>
<script>
$(document).ready(function() {
    $('#draytable_pickup').dataTable({
        "paging": true,
        "ordering": true
    });

    //   $('#draytable_pickup').addClass('fixed');         
});

$(document).ready(function() {
    $('#draytable_pickup').fixedHeaderTable('show');
});
</script>
<table id="draytable_pickup" class="table table-hover table-striped table-bordered table-condensed small" data-link="row">
    <thead>
        <tr>
        ....
        ....
        </tr>

在线建议似乎对我不起作用。任何人都可以建议我做什么？

Answer 1

这是一个有效的例子： https://jsfiddle.net/dLz8evtb/

这是一个显示标题的屏幕截图，即使我已经一直滚动到底部。还显示页码。

以下是JavaScript：

$(document).ready(function() {
    var dt = $('#draytable_pickup').DataTable({
        "paging": true,
        "ordering": true,
        "pageLength": 50
    });
    new $.fn.dataTable.FixedHeader( dt );
});

我将pageLength设置为50，这样您就可以更轻松地看到滚动。

您需要的主要功能是将DataTable调用的结果分配给我的代码中的变量 - dt - 然后将其传递给$ .fn.dataTable.FixedHeader调用。

参见文档： https://www.datatables.net/extensions/fixedheader/

编辑：请注意原始答案有一个指向jsfiddle的链接，该jsfiddle使用http导入外部文件，而不是https。这适用于某些浏览器，但其他浏览器阻止了这些内容。