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() API函数来访问thead元素，而不是直接引用它。使用Scroller或FixedHeader扩展时，thead元素会在表格外部显示在单独的元素中。

请参阅updated jsFiddle以获取代码和演示。

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

1 个答案: