jquery - 让 columnFilter 插件与 DataTables 一起使用

Question

我正在使用 1.10.2 DataTables，我想利用 columnFilter 插件，而不是手动将一些东西组合在一起。我正在使用带有数据表、jQuery 1.10.2、jQuery UI 1.10.3 和 bootstrap 3.1.1 的引导渲染器。这个特定的表没有使用任何花哨的东西(没有固定标题，没有固定列，没有 ColVis 或 ColReorder)。分页已打开。

<link rel="stylesheet" type="text/css" href="~/CSS/dataTables.bootstrap.css" />
<!-- stuff -->
<table id="reportTable" class="table table-condensed table-striped table-bordered">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
<!-- stuff -->
<script type='text/javascript' src='~/Scripts/jquery.dataTables.js'></script>
<script type='text/javascript' src='~/Scripts/dataTables.bootstrap.js'></script>
<script type="text/javascript" src="~/Scripts/jquery.dataTables.columnFilter.js"></script>

JavaScript:

vm.table = $('#reportTable').DataTable({
    dom: 'rtipfl',
    autoWidth: false,
    info: true,
    lengthChange: true,
    lengthMenu: [ 10, 15, 20 ],
    displayLength: 10,
    pageLength: 10,
    ordering: true,
    orderMulti: true,
    orderClasses: true,
    order: [[ 2, "asc" ]],
    paging: true,
    pagingType: "full_numbers",
    renderer: "bootstrap",
    deferRender: true,
    processing: true,
    scrollX: false,
    scrollY: false,
    scrollCollapse: false,
    searching: true,
    columns: vm.columns,
    columnDefs: vm.columnDefs,
    data: vm.postingArray,
    initComplete: function (settings, json) {
        vm.attachTableEventHandlers();
    }
});

不过这是一个有 22 列的表。我注意到的第一件事是，columnFilter 示例仅提到 DataTables 的小写初始化，例如:

$('#blabla').dataTable().columnFilter();

如果我说

vm.table = $('#reportTable').DataTable({
     ...
}).columnFilter();

我胖了

"TypeError: $(...).DataTable(...).columnFilter is not a function
 vm.table = $('#reportTable').DataTable({"

如果我说

vm.table = $('#reportTable').DataTable({
     ...
});
$('#reportTable').columnFilter();

"TypeError: oTable.fnSettings is not a function
if (!oTable.fnSettings().oFeatures.bFilter)"

如果我说

vm.table = $('#reportTable').DataTable({
     ...
});
$('#reportTable').dataTable().columnFilter();

没有出现任何过滤器。

我做错了什么？我该如何初始化它？

Answer 1

我认为您不能将 columnFilter 与新的“D”datables api 一起应用，因为与返回 jQuery 对象的 .dataTable() 调用不同，新的 .DataTable 调用返回一个 table 对象。

您可以修补columnFilter以支持新的“D”api

或

使用我的 yadcf plugin for datatables用于向您的列添加过滤器

请注意，yadcf 支持旧的和新的数据表 API，并且它有 10 个不同类型的过滤器和大量其他好东西:)

yadcf on github

yadcf showcase