javascript - DataTable 固定标题不适用于可滚动表

Question

我使用数据表已经有一段时间了，我有一个包含两列的数据表:

TableVehUsage = $("#TableVehUsage ").DataTable({
    data: [],
    ordering: true,
    paginate: false,
    "info": false,
    fixedHeader: {header: true},
    columns: [
        { data: "Vehicle", title: "Vehicle" },
        { data: "Serial", title: "Serial" }
    ],
    "columnDefs": [
        {
            "targets": 0,
            "render": function (data, type, full, meta) {
                // If it is rendering the cell contents
                if (type === 'display') {
                    switch (data) {
                        case "-":
                            return "-";
                        default:
                            if (full.IsOnSale == true)
                                return '<span style="color:red" onclick="ToParentTab(' + full.Id + ')">' + data + '</span>';
                            else
                                return '<span onclick="ToParentTab(' + full.Id + ')">' + data + '</span>';
                    }
                }
                return (isNaN(data)) ? -1 : +data;
            }
        } }]
});

在某些情况下，页面无法容纳所有数据，用户需要向下滚动才能查看所有信息。我尝试使用Fixed Header通过在我的 javascript 中添加行 fixedHeader: {header: true} 和 html:

<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">

但对我不起作用:(

我做错了什么？

Answer 1

我发现了一个可能有帮助的 DataTable 插件。有关它的信息位于https://datatables.net/extensions/scroller/

使用这个，我的定义如下:

  var table1 = $('#example').DataTable({ paging: true,   
      scrollY:        200,
      deferRender:    true,
      scroller:       true });

我在 https://jsfiddle.net/bindrid/oywvh1ek/6/ 做了一个 jsFiddle