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

Question

我想显示数据在顶部，固定高度和滚动器启用列级过滤器的jQuery DataTable中。我能够在顶部显示列级别过滤器并使其工作。但是，一旦我设置了高度（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, 

如下所示的表与上塔顶部级别过滤器的出现，

问题：

当上述属性已启用，列级别过滤器消失，

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

后市展望：

我想有在上面列级过滤器，固定高度和滚动启用的DataTable。我错过了什么？任何帮助/建议表示赞赏。

Answer 1

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

查看updated jsFiddle的代码和演示。