jquery 数据表：columnFilter() 不是函数错误

Question

我正在使用带有自定义服务器端过滤、搜索和排序的数据表...为什么 columnFilter() 返回错误“TypeError: $(...).DataTable(...).columnFilter is not a功能”

这是我使用 columnFilter 的方法：

var table = $('#item-table').DataTable({
    ajax: '<?= site_url("price_update"); ?>',
    serverSide: true,
    processing: true,
    paging: true
}).columnFilter();

我的代码没有“.columnFilter()”可以正常工作。

Answer 1

在使用columnFilter 时，您必须使用“oldschool”dataTable() 构造函数。概念证明：

不起作用，产生与问题相同的错误：
使用 DataTable() 实例化的 1.10.x 的 columnFilter -> http://jsfiddle.net/87kam74q/

有效：
使用 dataTable() 实例化的 1.10.x 的 columnFilter -> http://jsfiddle.net/LvL4vm8e/

原因是，columnFilter 假定它正在使用“旧”jQuery 对象，而不是新的 API 对象。不过，您仍然可以通过 .api() 方法访问新 API，例如：

var table = $('#example').dataTable();
table.api().search('test').draw();

---

如果你不想通过table.api()来使用新的AP，而坚持使用DataTable()，你可以通过放弃链接来达到同样的效果：

var table = $('#example').DataTable();
$('#example').dataTable().columnFilter({
    sPlaceHolder : 'head:before',
    aoColumns: [ { type: "text"},
                 { type: "text"},
                 { type: "text"},
                 { type: "text"},
                 { type: "text"}
               ] 
});

小提琴 -> http://jsfiddle.net/qbr01oya/。这不会导致 dataTable 被初始化两次（dataTables 检查）。