如何使用ColumnFilter或LightColumnFilter与angular-datatables错误b.dataTable.columnFilter不是一个函数

时间:2016-08-11 14:22:35

标签: javascript jquery angularjs datatables angular-datatables

我想将columnFilter或LightColumnFilter与angular-datatables一起使用,但我收到以下错误b.dataTable.columnFilter is not a function

我知道在网站示例https://l-lin.github.io/angular-datatables/#/withColumnFilter中,它表明您需要添加这些脚本

<script src="vendor/datatables-columnfilter/js/dataTables.columnFilter.js"></script>
<script src="vendor/angular-datatables/dist/plugins/columnfilter/angular-datatables.columnfilter.min.js"></script>

但是由于这些示例是在不久之前发布的,我相信第一个脚本dataTables.columnFilter.js在以后的jquery数据表版本中不再可用

我正在使用jquery Datatables 1.10.12

angular-datatables 0.5.5 and angularJs 1.5.7

这就是我创建表格的方式

vm.dtOptionsEstatus = DTOptionsBuilder.fromSource('data')
                    .withPaginationType('full_numbers')
                    .withOption('createdRow', createdRow)
                    .withOption('stateSave', true)
                    .withColumnFilter({
                        '0': {
                            type: 'text'
                        },
                        '1': {
                            type: 'text'
                        },
                        '2': {
                            type: 'text'
                        },
                        '3': {
                            type: 'text'
                        },
                        '4': {
                            type: 'text'
                        }
                    })
                    // Add Bootstrap compatibility
                    .withBootstrap()


    // Active Responsive plugin
//                        .withOption('responsive', true)
                        .withScroller()
//                        .withOption('scrollY', 100)
                        .withOption('scrollX', 200)
//                        .withOption('bFilter', false)
                        ;

2 个答案:

答案 0 :(得分:1)

我遇到了使用bower下载的库的问题。使用以下链接下载的库修复了我的问题。

&#13;
&#13;
<script src="http://l-lin.github.io/angular-datatables/archives/vendor/datatables-light-columnfilter/dist/dataTables.lightColumnFilter.min.js"></script> <script src="http://l-lin.github.io/angular-datatables/archives/dist/plugins/light-columnfilter/angular-datatables.light-columnfilter.js"></script> 
&#13;
&#13;
&#13;

了解更多信息https://github.com/l-lin/angular-datatables/issues/928

答案 1 :(得分:0)

dataTables.columnFilter.js不是标准数据表插件的一部分,因此在通常可以获取其他数据表插件的CDN上不可用。你可以从https://github.com/RobinDev/jquery.dataTables.columnFilter.js/tree/master

那里得到它

还要确保您的应用取决于datatables.columnfilter模块

angular.module('showcase.withColumnFilter', ['datatables', 'datatables.columnfilter']).controller('WithColumnFilterCtrl', WithColumnFilterCtrl);