Light Column Filter plugin not working

[raphaelspimenta]

Hi everyone,

First of all, this is the versions i'm using.

• jquery: 1.11.1
• datatables: 1.10.12
• angular-datatables: 0.5.6 (dev)

I have an AngularJs application with Angular Datatables and it works really well. I'm using some plugins like withFixedHeader (http://l-lin.github.io/angular-datatables/#/withFixedHeader) and it work's fine too. But now, i need individual filters in my columns.

I tried columnFilter plugin but no success (i did not find dataTables columnFilter js file). Working with lightColumnFilter (http://l-lin.github.io/angular-datatables/#/withLightColumnFilter) it gives no error but filters are not added to the table, only a new row tr. Here's a image of it.

Here's also my controller js.

       vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
            var defer = $q.defer();
            vm.mainService.getAll(subsegmento).then(function(result) {
                if (result.data.error === true) $location.path('/home/index');
                defer.resolve(result.data);
            });
            return defer.promise;
        })
        .withPaginationType('full_numbers').withOption('createdRow', createdRow)
        .withOption('headerCallback', function(header) {
            if (!vm.headerCompiled) {
                vm.headerCompiled = true;
                $compile(angular.element(header).contents())($scope);
            }
        })
        .withFixedHeader({ bottom: true })
        .withOption('deferRender', true)
        .withOption('initComplete', function() {
           angular.element('.dataTables_filter input').attr('placeholder','Buscar...'); 
           angular.element('.dataTables_filter input').addClass('form-control');
           angular.element('.dataTables_filter label').addClass('top_search');
           angular.element('#DataTables_Table_0_info').addClass('dataTables_info');
           angular.element('#DataTables_Table_0_paginate').addClass('datatable-responsive_paginate');
        })
        .withLightColumnFilter({
            '0' : { },
            '1' : { type : 'text' },
            '2' : { type : 'text' },
            '3' : { type : 'text' }
        });

        vm.dtColumns = [
                        DTColumnBuilder.newColumn('id').withTitle('ID'),
                        DTColumnBuilder.newColumn('ean').withTitle('ean'),
                        DTColumnBuilder.newColumn('name').withTitle('Nome'),
                        DTColumnBuilder.newColumn('n').withTitle('NCM'),
                        DTColumnBuilder.newColumn('subsegment_id').withTitle('Subsegmento')
        ];

Does anyone knows what's happening?

Thanks for any help!

[l-lin]

Did you add the datatables.light-columnfilter to your Angular app?
On a side note, Light columnFiler only works on server side processing.

[addario]

I'm having the same problem... I did add the Light columnFiler plugin and the angular Light columnFiler

and I'm usin
jquery: 1.11.1
datatables: 1.10.12
angular-datatables: 0.5.6 (dev)

[addario]

I made it work by importing the script versions of your site

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

I removed the scripts add by bower and I manually add the versions of your site and now is working

[raphaelspimenta]

It works!

I don't know exactly if it was the scripts.. but i did what you said and now it works fine.

Thanks!

[victorhazbun]

PLEASE READ THIS: thansen-solire/datatables-light-columnfilter#19

I have created a working version https://gist.github.com/victorhazbun/b42a50c11933259b8df654acc2b7e350

[victorhazbun]

This should be an open issue BTW. Why is it closed? Have you merged a fix?

[izthuca]

It works! Has anyone tried to implement the column filter search?

Thanks!

[zzzuzik]

I updated thansen-solire/datatables-light-columnfilter#19
the attr must exist for now, like:

                    '0': {
                        html: 'input',
                        type: 'text',
                        attr: {}
                    }

Either the doc should be updated or the code of the light filter fixed

[izthuca]

Hi @zzzuzik , I tried to use your code, but it failed to send data from the textfield (firstname), I've attached a screenshot.