0

I can't find any similar problems on SO, so I suspect my issue is due to my setup, so I hope someone is able to spot a flaw in my code

I've used DataTables successfully in the past, but not with Angular and I'm having some trouble getting the table to do the initial load with its data.

I have the following code and the code with a fromFnPromise() that never gets hit. As you'll see, I'm forced to use an existing controller, so its definition does not match that of the example, but I'm pretty sure what I have should work:

    var controllerName = "gaugeDashboardController";
    angular
        .module('bps.gauge', ['daterangepicker', 'amChartsDirective', 'angularjs-dropdown-multiselect', 'datatables', 'datatables.bootstrap', 'datatables.buttons'])
        .controller(controllerName, Controller);

    Controller.$inject = ['$scope', '$location', 'hubservice', '$http', '$state', '$stateParams', '$localStorage', 'coreAppService', '$q', 'DTOptionsBuilder', 'DTColumnDefBuilder'];
    function Controller($scope, $location, hubservice, $http, $state, $stateParams, $localStorage, coreAppService, $q, DTOptionsBuilder, DTDefColumnBuilder) {
            var vm = this;
            vm.dtOptions = DTOptionsBuilder.fromFnPromise(function () {
                    var defer = $q.defer();
                    $http.get('/master/js/custom/bps/empty.json').then(function (result) {
                        defer.resolve(result.data);
                    });
                    return defer.promise;
                })
                .withPaginationType('full_numbers')
                .withButtons([
                    'copy',
                    'excel'
                ])
                .withOption('responsive', true);
            vm.dtInstance = {};

            vm.dataTableColumns = [
                DTDefColumnBuilder.newColumnDef('Id').withTitle('Id').notVisible(),
                DTDefColumnBuilder.newColumnDef('LocationId').withTitle('LocationId').notVisible(),
                DTDefColumnBuilder.newColumnDef('ClientId').withTitle('ClientId').notVisible(),
                DTDefColumnBuilder.newColumnDef('RecordDate').withTitle('RecordDate'),
                DTDefColumnBuilder.newColumnDef('StoreCode').withTitle('StoreCode'),
                DTDefColumnBuilder.newColumnDef('LocationName').withTitle('LocationName'),
                DTDefColumnBuilder.newColumnDef('SubLocality').withTitle('SubLocality'),
                DTDefColumnBuilder.newColumnDef('Locality').withTitle('Locality'),
                DTDefColumnBuilder.newColumnDef('Country').withTitle('Country')
            ];

I've also tried the following and the GET request is never fired:

DTOptionsBuilder.fromSource('/js/data/test.json')

The json file just contains a simple array of objects

HTML:

<table datatable="" dt-options="dataTableOptions" dt-columns="dataTableColumns" dt-instance="dtInstance" dt-column-defs="dtColumnDefs" class="row-border hover"></table>

The controller name is not specified in the HTML, but rather in a routes.config.js file as follows:

    .state('app.gauge_dashboard', {
        url: '/gauge/dashboard',
        title: 'Gauge Dashboard',
        controller: 'gaugeDashboardController',
        controllerAs: 'gdc',
        templateUrl: helper.basepath('Bps/GaugeDashboard'),
        params: {
        }
    })

So, in my understanting of this syntax, the controller name is set programmatically to 'gaugeDashboardController' when my HTML (at url: "/guage/dashboard"). So I think the scope is correct. Initially I got the injection of the dependency wrong and I got exceptions about the validity of DTDefColumnBuilder and DTOptionsBuilder

I've made sure that my JS files are included in the correct order as specified here

I do get an exception thrown in jquery.dataTables.js "Cannot read property 'aDataSort' of undefined", but this is after the above code gets executed.

It seems to me as if I'm missing some instantiation method call, but there's nothing here that I'm leaving out.

I really want to achieve two things:

  1. Get the table to instantiate with data
  2. Push new data into the table at a later stage. I can't seem to do this because there is no instance of the table
Adam Hey
  • 1,512
  • 1
  • 20
  • 24
  • You are currently doing an anti-pattern with your http promise. Just return the http.get and in it's .then function return `result.data`. no need to create a promise yourself. – Mathew Berg Mar 22 '18 at 01:37
  • What I have there is what's in the example: http://l-lin.github.io/angular-datatables/archives/#!/withPromise the issue I'm having is that the code in the promise is never hit. `DTOptionsBuilder.fromSource('/js/data/test.json')` also does nothing – Adam Hey Mar 22 '18 at 01:40
  • https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern I'm on a mobile phone, sorry I can't help with what's going on. I only noticed the oddity. – Mathew Berg Mar 22 '18 at 01:50
  • No problem. thanks for your input! – Adam Hey Mar 22 '18 at 01:53
  • Ok, just got home. I see you're attaching it to the `vm` but then in your dom you're using the variables directly. Could you try doing `$scope.dtOptions = ...`? Also include more html as I'm not sure if you're using the controllerAs syntax (which they sort of highlight in the example you linked) – Mathew Berg Mar 22 '18 at 03:17
  • Thanks for looking again, I do appreciate it. I did initially try $scope.dtOptions, but the result was the same. I'll update the question with more info on the controller – Adam Hey Mar 22 '18 at 12:58
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/167365/discussion-between-mathew-berg-and-adam-hey). – Mathew Berg Mar 22 '18 at 19:10
  • Just wrapping my head around the same problem. Could you finally solve it? – nik Jul 30 '19 at 10:35

0 Answers0