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

时间:2017-01-21 08:09:22

标签: javascript html datatable

我一直在使用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">

但不适合我:(

我做错了什么?

2 个答案:

答案 0 :(得分:2)

我找到了一个可能有帮助的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

答案 1 :(得分:0)

尝试将您的数据添加到另一个仅包含“&#39;值”的变量中。它中键值对的一部分。例如,在的情况下 {&#34;车辆&#34;:&#34;奥迪&#34;}, 您的数据&#39;变量应该只有[&#34;奥迪&#34;]。

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

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