Using angular-datatables DTOptions In Controller

Question

I am using angular-datatables in a project. I am using it like this:

<table datatable="ng" class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>First</th>
      <th>Last</th>
      <th>Occupation</th>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat="person in people">
      <td>{{person.Id}}</td>
      <td>{{person.FirstName}}</td>
      <td>{{person.LastName}}</td>
      <td>{{person.Job}}</td>
    </tr>
  </tbody>
</table>

Oddly enough, the table renders. However, it does not behave like a data table. Sorting is not loaded. Is there a way for me to check to see if datatables has been loaded? In my page, I have the following:

<link href="/libs/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="/libs/angular-datatables/dist/datatables.bootstrap.min.css" rel="stylesheet"/>

<script src="/libs/jquery/dist/jquery.min.js"></script>
<script src="/libs/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/libs/angular/angular.min.js"></script>
<script src="/libs/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="/js/app.js"></script>

angular.bootstrap($('#myApp'), ['myApp']);

MyApp is manually bootstrapped because there are multiple apps on the page. app.js has the following:

'use strict';
var myApp = angular.module('myApp', ['ngAnimate', 'ui.bootstrap', 'datatables', 'app.components']);

myApp.controller('MyController', ['$scope', 
function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {
  console.log(DTOptionsBuilder);
}])
;

the console.log statement prints undefined. This implies to me that datatables isn't being loaded. However, I'm not sure how to confirm that. I do not see any 404s in my console window. So, I assume that I'm at least downloading the necessary libraries. It feels like I'm not injecting datatables properly. However, it looks correct to me. Yet, sorting is not working and DTOptionsBuilder is printing undefined.

What am I doing wrong?

Lulu · Accepted Answer · 2016-08-11 13:52:14Z

6

Inline Array Annotation is not provided properly the correct way to do it is:

myApp.controller('MyController', ['$scope', 'DTOptionsBuilder', 'DTColumnDefBuilder',
function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {
  console.log(DTOptionsBuilder);
}])
;

edited Aug 11, 2016 at 13:52

Lulu

4705 silver badges15 bronze badges

answered Jan 1, 2015 at 11:25

karthik pamidimarri

3052 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Using angular-datatables DTOptions In Controller

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