javascript - 数据表卡住 header

Question

像这样上下滚动时数据表固定标题 link

$(document).ready(function() {
        $('#student_datatable').DataTable( {
            fixedHeader: true,
            scrollX: true,
            bSort : false
        } );
    } );

fixedHeader: true 不起作用。你能帮助我吗 ？

Answer 1

您问题中的 fiddle 链接与数据表无关。它使用一些 CSS 来实现常规 html 表格的固定 header 功能。在你的情况下这个CSS是没有用的。

对于数据表，请使用 FixedHeader plugin

首先，您需要通过将其添加到您的 html 中来引用它(如果尚未包含它):

<script src="https://cdn.datatables.net/fixedheader/3.1.1/js/dataTables.fixedHeader.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.1/css/fixedHeader.dataTables.min.css">

然后

$('#student_datatable').DataTable({
    fixedHeader: true
});

将按预期工作 ( Working fiddle )