Using angular-datatables DTOptions in a controller

I am using angular-datatables in a project. I use 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 displays. However, it does not behave like a data table. The sort has not been loaded. Is there a way to check if it's loaded datatables

? On 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 loaded 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 means it datatables

doesn't load. However, I'm not sure how to confirm this. I don't see any 404s in my console window. So I am assuming that I am at least downloading the required libraries. It looks like I am not injecting correctly datatables

. However, this looks right to me. However, the sorting doesn't work and DTOptionsBuilder

prints undefined.

What am I doing wrong?

+3


source to share


1 answer


Inline Array Annotation

not properly provided the correct way to do it:



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

Run code


+6


source







All Articles