数据表修复 header 不适用于可滚动表

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

当所有数据都不适合页面并且用户需要向下滚动以查看所有信息时，我遇到了一些情况。 我尝试使用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

Answer 2

尝试将数据添加到仅包含键值对的“值”部分的其他变量中。 例如，对于{“ vehicle”：“ Audi”}，您的'data'变量中应仅包含[“ Audi”]。

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

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

Answer 3

我遇到了一个问题，我的 fixedHeader 一直在工作，直到我到达页面的一半左右，然后它就消失了。 这是我为使其正常工作所做的工作：

在我的 JS 文件的顶部：

$(document).ready(function () {
    DrawDataTable();

    //This enables the table header to stick to the top of the page when the user is scrolling
    var employeeData = $('#employee-table').DataTable();
    employeeData.fixedHeader.adjust();
});

然后在同一个 JS 文件中，在我的 jQuery ajax 调用中，我必须添加显示"fixedHeader": true

最后，在我的 HTML 文件中，我必须在<head>部分中包含以下内容：

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/fh-3.2.4/r-2.3.0/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/fh-3.2.4/r-2.3.0/datatables.min.js"></script>

不要忘记，您还需要在头部包含任何 Bootstrap、JavaScript 或 jQuery 脚本或样式表。

数据表修复 header 不适用于可滚动表

问题描述

3 个解决方案

解决方案1
2 2017-01-22 06:21:43

解决方案2
0 2017-12-21 09:01:34

解决方案3
0 2022-08-23 20:08:47

数据表修复 header 不适用于可滚动表

问题描述

3 个解决方案

解决方案1 2 2017-01-22 06:21:43

解决方案2 0 2017-12-21 09:01:34

解决方案3 0 2022-08-23 20:08:47

解决方案1
2 2017-01-22 06:21:43

解决方案2
0 2017-12-21 09:01:34

解决方案3
0 2022-08-23 20:08:47