How to use ColumnFilter or LightColumnFilter with angular-datatables error b.dataTable.columnFilter is not a function

Question

I want to use columnFilter or LightColumnFilter with angular-datatables but I get the following error b.dataTable.columnFilter is not a function

I know that in the website example https://l-lin.github.io/angular-datatables/#/withColumnFilter it shows that you need to add these scripts

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

But since these example was made a while ago I believe that the first script dataTables.columnFilter.js it's no longer available in the later jquery datatables versions

I'm using jquery Datatables 1.10.12 and

angular-datatables 0.5.5 and angularJs 1.5.7

this is how I'm creating my table

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)
                        ;

dnyanesh · Accepted Answer · 2017-05-11 10:06:23Z

1

I had issue with library downloaded using bower. the library downloaded using following links fixed my issue.

<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>

for more information https://github.com/l-lin/angular-datatables/issues/928

answered May 11, 2017 at 10:06

dnyanesh

991 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shane Rowatt · Accepted Answer · 2016-08-25 00:05:24Z

0

The library dataTables.columnFilter.js is not part of the standard datatables plugins and so is not available on CDNs where you normally would get the other datatable plugins. You can get it from here https://github.com/RobinDev/jquery.dataTables.columnFilter.js/tree/master

Also make sure your app depends on the datatables.columnfilter module

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

answered Aug 25, 2016 at 0:05

Shane Rowatt

2,1153 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to use ColumnFilter or LightColumnFilter with angular-datatables error b.dataTable.columnFilter is not a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related