javascript - jQuery DataTable - 顶部的列级过滤器和固定高度不能一起工作

Question

我正在尝试在 jQuery DataTable 中显示数据，该数据表在顶部具有列级过滤器、固定高度和启用的滚动条。我能够在顶部显示列级过滤器并使其正常工作。但是，一旦我设置了高度(scrollY 属性)，顶部的列级过滤器就会消失。

fiddler : https://jsfiddle.net/8f63kmeo/6/

HTML:

<table id="CustomFilterOnTop" class="display nowrap" width="100%"></table>

JS

var Report4Component = (function () {
    function Report4Component() {
        //contorls
        this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
        //data table object
        this.customFilterOnTopGrid = null;
    }
    Report4Component.prototype.ShowGrid = function () {
        var instance = this;
        //create the datatable object
        instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
            columns: [
                { data: "Description", title: "Desc" },
                { data: "Status", title: "Status" },
                { data: "Count", title: "Count" }
            ],
            "paging": true,
                //scrollY: "30vh", 
            //deferRender: true,
            //scroller: true,    
            dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">ilp<"clear">>',
            buttons: [
                {
                    text: 'Load All',
                    action: function (e, dt, node, config) {
                        instance.ShowData(10000);
                    }
                }
            ]
        });
        //now, add a second row in header which will hold controls for filtering. 
        $('#' + instance.customFilterOnTopControl + ' thead').append('<tr role="row" id="FilterRow">' +
            '<th>Desc</th>' +
            '<th>Status</th>' +
            '<th>Count</th>' +
            '</tr>');
        $('#' + instance.customFilterOnTopControl + ' thead tr#FilterRow th').each(function () {
            var title = $('#' + instance.customFilterOnTopControl + ' thead th').eq($(this).index()).text();
            $(this).html('<input type="text" onclick="StopPropagation(event);" placeholder="Search ' + title + '" class="form-control" />');
        });
        $("div.Notes").html('<div class="alert alert-warning">This is a notes section part of the table dom.</div>');
    };
    Report4Component.prototype.BindEvents = function () {
        var instance = this;
        $("#CustomFilterOnTop thead input").on('keyup change', function () {
            instance.customFilterOnTopGrid
                .column($(this).parent().index() + ':visible')
                .search(this.value)
                .draw();
        });
    };
    Report4Component.prototype.ShowData = function (limit) {
        if (limit === void 0) { limit = 100; }
        var instance = this;
        instance.customFilterOnTopGrid.clear(); //latest api function
        var recordList = [];
        for (var i = 1; i <= limit; i++) {
            var record = {};
            record.Description = "This is a test description of record " + i;
            record.Status = "Some status " + i;
            record.Count = i;
            recordList.push(record);
        }
        instance.customFilterOnTopGrid.rows.add(recordList);
        instance.customFilterOnTopGrid.draw();
    };
    return Report4Component;
}());
$(function () {
    var report4Component = new Report4Component();
    report4Component.ShowGrid();
    report4Component.BindEvents();
    report4Component.ShowData();
});
function StopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    }
    else {
        evt.cancelBubble = true;
    }
}

当前状态

当注释下面的属性时，

   //scrollY: "30vh", 
   //deferRender: true,
   //scroller: true,

表格显示在顶部，列级别过滤器如下所示，

问题:

启用上述属性后，列级过滤器消失，

您可以使用 fiddler 来查看此行为。

期望:

我想要一个顶部带有列级过滤器、固定高度和启用滚动条的 DataTable。我错过了什么？感谢任何帮助/建议。

Answer 1

您需要使用 table().header()访问 thead 元素而不是直接引用它的 API 函数。当使用 Scroller 或 FixedHeader 扩展时，thead 元素出现在表格之外的单独元素中。

参见 updated jsFiddle用于代码和演示。