Angularjs datatable plugins are not binding second time

Question

I am using angularjs datatable with 2 plugins named withButton and withColumnfilter.

I am loading plugins files in resolve using oclazyload. somehow when I load page first time for that datatable which have one of above plugins. It will work fine but if I change the page which has also datatble with another one plugin then it gives me "not a function" error.

$stateProvider.state('firms.browse', {
        url: "/browse",
        templateUrl: "modules/firms/browse/browse.html",
        controller: 'browseController',
        data: {pageTitle: 'Browse Firm'},
        resolve: {
            loadPlugin: function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    serie: true,
                    files: ['js/plugins/dataTables/datatables.min.js', 'js/plugins/dataTables/dataTables.columnFilter.js', 'css/plugins/dataTables/datatables.min.css']
                }, {
                    serie: true,
                    name: 'datatables',
                    files: ['js/plugins/dataTables/angular-datatables.min.js']
                }, {
                    serie: true,
                    name: 'datatables.columnfilter',
                    files: ['js/plugins/dataTables/angular-datatables.columnfilter.min.js']
                }, {
                    serie: true,
                    name: 'datatables.buttons',
                    files: ['js/plugins/dataTables/angular-datatables.buttons.min.js']
                }]);
            },
            checkUserPermission: checkUserPermission('attorney_firm', 'view')
        }
    }).state('invoice.browse', {
        url: "/browse?invoice_number",
        templateUrl: "modules/invoice/browse.html",
        controller: 'invoiceController',
        data: {pageTitle: 'invoice'},
        resolve: {
            loadPlugin: function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    serie: true,
                    files: ['js/plugins/dataTables/datatables.min.js', 'css/plugins/dataTables/datatables.min.css','css/plugins/ng-tags-input/ng-tags-input.css','css/plugins/ng-tags-input/ng-tags-input.bootstrap.css']
                }, {
                    serie: true,
                    name: 'datatables',
                    files: ['js/plugins/dataTables/angular-datatables.min.js']
                }, {
                    serie: true,
                    name: 'datatables.light-columnfilter',
                    files: ['js/plugins/dataTables/dataTables.lightColumnFilter.js','js/plugins/dataTables/angular-datatables.light-columnfilter.js']
                },
                {
                    files: ['css/plugins/iCheck/custom-blue.css', 'js/plugins/iCheck/icheck.min.js']
                },
                {
                    insertBefore: '#loadBefore',
                    name: 'localytics.directives',
                    files: ['css/plugins/chosen/bootstrap-chosen.css', 'js/plugins/chosen/chosen.jquery.js', 'js/plugins/chosen/chosen.js']
                },
                {
                    serie: true,
                    name: 'ngTagsInput',
                    files: ['js/plugins/ng-tags-input/ng-tags-input.min.js']
                }
                ]);
            },
            checkUserPermission: checkUserPermission('invoice', 'view')
        }
    })

Above is config.js file code.

$scope.dtOptions = DTOptionsBuilder.newOptions()
            .withDataProp('data')
            .withOption('ajax', function (data, callback, settings) {
                // map your server's response to the DataTables format and pass it to
                invoiceFactory.showDataTable('/api/invoice/get-invoice-listing', data).success(function (res) {
                    if (res.error) {
                        $scope.reloadData();
                    }
                    else {
                        $scope.selectAll = true;
                        $scope.invoiceArray = {};
                        callback(res);
                    }
                }).error(function (err) {
                    if (err.error !== "token_not_provided") {
                        $scope.reloadData();
                    }
                });
            })
            .withOption('processing', true)
            .withLanguage({
                "sEmptyTable": "NO INVOICE AVAILABLE IN TABLE",
                "sInfo": "SHOWING _START_ TO _END_ OF _TOTAL_ INVOICES",
                "sInfoEmpty": "SHOWING 0 TO 0 OF 0 INVOICES",
                "sInfoFiltered": "(FILTERED FROM _MAX_ TOTAL INVOICES)",
                "sInfoPostFix": "",
                "sInfoThousands": ",",
                "sLengthMenu": "SHOW _MENU_ INVOICES",
                "sLoadingRecords": "<img src='img/loading_bar.gif'/>",
                "sProcessing": "<img src='img/loading_bar.gif'/>",
                "sSearch": "SEARCH:",
                "sZeroRecords": "NO MATCHING INVOICE FOUND",
                "oPaginate": {
                    "sFirst": "FIRST",
                    "sLast": "LAST",
                    "sNext": "NEXT",
                    "sPrevious": "PREVIOUS"
                },
                "oAria": {
                    "sSortAscending": ": ACTIVATE TO SORT COLUMN ASCENDING",
                    "sSortDescending": ":   ACTIVATE TO SORT COLUMN DESCENDING"
                }
            })
            // .withOption('language', {"processing": "<img src='img/loading_bar.gif'/>",
            //     "sZeroRecords": "<div class='text-center'>No Record Found!</div>",
            //     "sInfo": "Showing START to END of TOTAL Records",
            //     "sInfoEmpty": "Showing 0 to 0 of 0 Records",
            //     "sInfoFiltered": "(filtered from MAX total Records)"})
            .withOption('serverSide', true)
            .withOption('stateSave', true)
            .withPaginationType('simple_numbers')
            .withOption('searchDelay', 500)
            .withOption('order', [1, 'desc'])
            .withOption('createdRow', $scope.createdRow)
            .withOption('headerCallback', function (header) {
                // Use this headerCompiled field to only compile header once
                if (!$scope.headerCompiled) {
                    $compile(angular.element(header).contents())($scope);
                }
            })
            .withLightColumnFilter({
                '1': {
                    type: 'text'
                },
                '2': {
                    type: 'text'
                },
                '3': {
                    type: 'text'
                },
                '4': {
                    type: 'text'
                },
                '5': {
                    type: 'text'
                },
                '6': {
                    type: 'text'
                }
            });

Above is controller code.

withButton has error, could you show config about withButton? — leaf
– leaf, Commented Aug 24, 2017 at 6:44
Actually, we didn't have any config for withButton but if you need resolve code of config file then I can add into question. So you can check. — Dharmesh patel
– Dharmesh patel, Commented Aug 24, 2017 at 6:55

Rabbi Shuki Gur · Accepted Answer · 2017-08-24 06:40:23Z

2

The error you are getting is because angular datatables doesn't recognize a function called withLightColumnFilter.

You may have added it as a plugin, but I guess that is not the way to use it.

If the documentation of the plugin doesn't give you a clear example I would try this.

$scope.dtOptions = DTOptionsBuilder.newOptions()
     ...
.withOption('LightColumnFilter', {
     ...
 };

answered Aug 24, 2017 at 6:40

Rabbi Shuki Gur

1,72620 silver badges37 bronze badges

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

2 Comments

Dharmesh patel Over a year ago

Ummm... It has solved partially. means, now it doesn't show error in a console but also doesn't filter columns. any suggestion?

Rabbi Shuki Gur Over a year ago

happy to see you found a solution, for later reference, you should look at the original link on the angular-datatables website: l-lin.github.io/angular-datatables/archives/#!/…

Kushal Suthar · Accepted Answer · 2017-08-24 08:45:59Z

1

I think it's all up to lazy load Because I also face that type of issue. So I think you need to load directly into your index.html file instead of lazyloading.

answered Aug 24, 2017 at 8:45

Kushal Suthar

4236 silver badges21 bronze badges

1 Comment

Dharmesh patel Over a year ago

yes, I tried this at last and it works now... Basically, I had to remove lazyload.

leaf · Accepted Answer · 2017-08-24 08:39:14Z

0

It seems like a 'withButton' error, so check it's added to module dependences if your datatables.min.js already includes the 'buttons' plugin

angular.module('moduelName', ['datatables.buttons'])

answered Aug 24, 2017 at 8:39

leaf

1,77411 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angularjs datatable plugins are not binding second time

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related