Angular Datatables Not Applying Correctly

Question

Here is my html code:

<div ng-controller="withAjaxCtrl">
   <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
</div>

Here is my controller:

(function () {

var manageBackOrdersController = function ($scope, $http, $routeParams) {

    $http({
        url: '/Profiles/firstJson',
        method: "GET",
        params: {}
    }).success(function (data) {
        var JSON = data;
        $scope.data = JSON;

    });

} 

manageBackOrdersController.$inject = ['$scope', '$http', '$routeParams'];

angular.module('customersApp')
  .controller('manageOrdersController', manageOrdersController);

angular.module('datatablesSampleApp', ['datatables'])
    .controller('withAjaxCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
        $scope.dtOptions = DTOptionsBuilder.fromSource('scope.data')
           .withPaginationType('full_numbers');
        $scope.dtColumns = [
            DTColumnBuilder.newColumn('Customer').withTitle('Customer')
        ];
    });

}());

When I run my page I get an error saying "Error: [ng:areq] Argument 'withAjaxCtrl' is not a function, got undefined". My data is found stored in $scope.data.

user1177440 · Accepted Answer · 2015-02-04 11:15:40Z

6

Respectfully, Sameer's answer is incorrect. It took me two long arduoous days but I found the solution.

What you must keep in mind are 2 concerns:

Use DTOptionsBuilder.fromFnPromise, and
Have your promise inside your factory.

This is the correct solution:

'use strict';
 WithResponsiveCtrl.$inject = ['DTOptionsBuilder', 'DTColumnBuilder', 'simpleFactory'];
 angular.module('showcase.withResponsive', [])
.controller('WithResponsiveCtrl', WithResponsiveCtrl);

function WithResponsiveCtrl(DTOptionsBuilder, DTColumnBuilder, simpleFactory) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
    return simpleFactory.getData(); }).withPaginationType('full_numbers')
    // Active Responsive plugin
    .withOption('responsive', true);
vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('firstName').withTitle('First name'),
    // .notVisible() does not work in this case. Use .withClass('none') instead
    DTColumnBuilder.newColumn('lastName').withTitle('Last name').withClass('none')
]; }

simpleFactory.$inject = ['$http', '$q', '$log'];
angular.module('showcase.withResponsive').factory('simpleFactory', simpleFactory); 
function simpleFactory($http, $q, $log) {
return {
    getData: function () {
        var deferred = $q.defer();
        $http.get('api/data.json')
            .success(function (data) {
                deferred.resolve(data);
            }).error(function (msg, code) {
                deferred.reject(msg);
                $log.error(msg, code);
            });
        return deferred.promise;
    }
} };

answered Feb 4, 2015 at 11:15

user1177440

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

2 Comments

Sameer Shemna Over a year ago

thanks for the update @user1177440 , that answer was just given on the top of my head that time, thus mentioned 'try replacing', anyways I will remove my answer and upvote yours, keep up the good work

Sameer Shemna Over a year ago

Oh I tried deleting it, it says I cant delete an accepted answer

Collectives™ on Stack Overflow

Angular Datatables Not Applying Correctly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related