angular-datatables error - undefined is not a function

Question

I am building a report with angular datatables. When I execute my page I get an error in my angular.js file saying that undefined is not a function along with some other code:

 TypeError: undefined is not a function
at Object._showLoading [as showLoading] (http://localhost:55823/Scripts/angular-datatables/angular-datatables.renderer.js:8:23)
at showLoading (http://localhost:55823/Scripts/angular-datatables/angular-datatables.directive.js:25:39)
at postLink (http://localhost:55823/Scripts/angular-datatables/angular-datatables.directive.js:17:26)
at http://localhost:55823/Scripts/angular-1.2.19/angular.js:7050:44
at nodeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6648:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6039:13)
at nodeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6642:24)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6039:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6042:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6042:13) <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover datatable ng-isolate-scope">

Here is my angular function building my table:

 var manageBackOrdersApp = angular.module('manageBackOrdersApp', ['sharedApp',  'datatables']);

 (function () {

 var manageBackOrdersController = function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtOptions = DTOptionsBuilder.fromSource('/Customer/ManageBackOrders/firstJson')
           .withPaginationType('full_numbers').withDisplayLength('1000');
    $scope.dtColumns = [
        DTColumnBuilder.newColumn('CustID').withTitle('Cust ID')
            .renderWith(function(data, type, full, meta) { 
                return '<a target="_blank" href="gmail.com">' + full.CustID + '</a>'
            }),
        DTColumnBuilder.newColumn('SOID').withTitle('SO ID')
            .renderWith(function(data, type, full, meta) { 
                return '<a target="_blank" href="gmail.com">' + full.SOID + '</a>'
            }),
        DTColumnBuilder.newColumn('CreateDate').withTitle('SO Date'),
        DTColumnBuilder.newColumn('SPerName').withTitle('Sales Rep'),
        DTColumnBuilder.newColumn('ItemID').withTitle('Item')
            .renderWith(function (data, type, full, meta) {
                return '<a target="_blank" href="gmail.com">' + full.ItemID + '</a>'
            }),
        DTColumnBuilder.newColumn('CurWhseID').withTitle('Cur Whse'),
        DTColumnBuilder.newColumn('QtyOnBO').withTitle('QtyOnBO'),
        DTColumnBuilder.newColumn('WhseID').withTitle('Avail Whse'),
        DTColumnBuilder.newColumn('QtyAvail').withTitle('Qty Avail'),
        DTColumnBuilder.newColumn('ShipMethDesc').withTitle('Ship Via'),
        DTColumnBuilder.newColumn('HoldReason').withTitle('Comments')
    ];

}

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

angular.module('manageBackOrdersApp').controller('manageBackOrdersController',      manageBackOrdersController)

}());

Lastly, here is my html:

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

I am not sure if I am missing something or have something out of order. As far as I know, I have all of the includes that I need for datatables to work. When I run my page the datatables loads enough to show the loading portion and then errors out. Thanks.

l-lin · Accepted Answer · 2015-01-07 13:38:42Z

6

I'm guessing you are using the v0.1.1.

I think the problem comes from the fact that Angular is not using jQuery but its jqlite. You need to include jQuery and datatables first, then Angular and finally angular-datatables:

<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-datatables.min.js"></script>

answered Jan 7, 2015 at 13:38

l-lin

1,0751 gold badge11 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

angular-datatables error - undefined is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related