问答:让columnFilter插件与DataTables一起使用

我正在使用1.10.2 DataTables，并且我想利用columnFilter插件而不是手动添加一些东西。我正在使用带有数据表，jQuery 1.10.2，jQuery UI 1.10.3和bootstrap 3.1.1的bootstrap渲染器。这个特定的表不使用任何花哨的东西（没有固定的标题，没有固定的列，没有ColVis或ColReorder）。分页功能已开启。

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 functionif (!oTable.fnSettings().oFeatures.bFilter)”

如果我说

vm.table = $(‘#reportTable’).DataTable({ …});$(‘#reportTable’).dataTable().columnFilter();

没有过滤器出现。

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