0

在 jsp 页面上工作。向下滚动页面时，需要冻结第一行（标题）。我正在尝试使用 JQuery 提供的功能来实现它，但没有成果。这是示例代码： refs ：

<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>

在线建议似乎对我不起作用。谁能建议我该怎么做？

4

1 回答 1

0

这是一个工作示例： https ://jsfiddle.net/dLz8evtb/

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

jsfiddle 截图

这是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 的链接，该链接使用 http，而不是 https 导入外部文件。这适用于某些浏览器，但其他浏览器会阻止此内容。

于 2015-06-09T17:40:37.830 回答