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

提琴手: 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,

表格出现,列级过滤器位于顶部,如下所示,

javascript - jQuery DataTable-顶部和固定高度的列级过滤器无法一起使用-LMLPHP

问题:

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

javascript - jQuery DataTable-顶部和固定高度的列级过滤器无法一起使用-LMLPHP

您可以使用提琴手来查看此行为。

期望值:

我想在顶部有一个列级过滤器,固定高度和滚动条的DataTable。我想念什么?任何帮助/建议表示赞赏。

最佳答案

您需要使用 table().header() API函数来访问thead元素,而不是直接引用它。当使用Scroller或FixedHeader扩展名时,thead元素将在表的外部显示在单独的元素中。

有关代码和演示,请参见updated jsFiddle

09-27 06:53