jQuery DataTables：columnFilter（）不是一个函数错误。

Question

我正在使用带有自定义服务器端过滤、搜索和排序的Data Tables…为什么columnFilter()返回错误："TypeError: $(...).DataTable(...).columnFilter不是一个函数"

以下是我使用columnFilter的方法：

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

如果没有使用“.columnFilter()”，我的代码可以正常运行。

- Christian Burgos

---

DataTable() 还是 dataTable()？ - Mate

DataTable()，D要大写。 - Christian Burgos

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"}
               ] 
});

fiddle -> http://jsfiddle.net/qbr01oya/. 这不会导致dataTable被初始化两次(dataTable会检查这个问题)。

- davidkonrad

---

谢谢你为我澄清这个问题。那么现在使用非“老派”的DataTable唯一的方法就是创建一个API吗？ - Christian Burgos

@ChristianBurgos，是的 - 但如果你放弃点链接，你可以两者兼得。请查看更新的答案。 - davidkonrad

这适用于服务器端处理吗？ - Christian Burgos

我使用了jquery-1.11.1.min.js，只是将$('#example').DataTable更改为$('#example').dataTable它像魔法一样奏效！谢谢。 - Sheikh M. Haris