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?
source to share