DataTable固定标头不适用于可滚动表

Question

我一直在使用dataTables很短的时间，我有一个包含两列的DataTable：

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;
            }
        } }]
});

我有一些情况，当所有数据都不适合页面，用户需要向下滚动才能看到所有信息。我试图通过添加到我的javascript行Fixed Header和html中使用fixedHeader: {header: true}：

<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

Answer 2

尝试将数据添加到另一个变量中，只包含键值对的“值”部分。例如，在{“vehicle”：“Audi”}的情况下，您的“数据”变量应该只包含[“Audi”]。

以下代码对我来说非常合适。

         $("<your_table_name>").DataTable({
                data:data,
                fixedHeader:true,
                "scrollX": true,
                "scrollY": "200px",
                "scrollCollapse": true,
                columns: [
                        { title: 'Vehicle' },
                        { title: 'Serial' }
                    ]
            });