我正在使用1.10.2 DataTables,并且我想利用columnFilter插件而不是手动添加东西。我正在使用带有数据表,jQuery 1.10.2,jQuery UI 1.10.3和bootstrap 3.1.1的bootstrap渲染器。这个特定的表不使用任何花哨的东西(没有固定的标题,没有固定的列,没有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();
没有过滤器出现。
我究竟做错了什么?我应该如何初始化它?
最佳答案
我认为您不能将columnFilter
与新的“ D” datables api一起应用,因为与.dataTable()
调用返回jQuery对象不同,新的.DataTable
调用返回了table
对象。
您可以修补columnFilter
以支持新的“ D” api
要么
使用我的yadcf plugin for datatables为您的列添加过滤器
请注意,yadcf支持新旧的datatable api,它具有10种diff'类型的过滤器和大量其他功能:)
yadcf on github
yadcf showcase