The Angular way with options
You can also provide datatable options and datatable column options with the directive
dt-options
:
Note:
-
The options do not override what you define in your template. It will just append its properties.
-
When using the angular way, you CANNOT use the
dt-column
directive. Indeed,
the module will render the datatable after the promise is resolved. So for DataTables, it's like rendering a static table.
If you need to provide some options to your columnn, your must provide the dt-column-defs
directive (which corresponds
to the DataTables columnDefs).
ID |
FirstName |
LastName |
{{ person.id }} |
{{ person.firstName }} |
{{ person.lastName }} |
ID |
FirstName |
LastName |
{{ person.id }} |
{{ person.firstName }} |
{{ person.lastName }} |
angular.module('datatablesSampleApp', ['ngResource', 'datatables'])
.controller('angularWayWithOptionsCtrl', function ($scope, $resource, DTOptionsBuilder, DTColumnDefBuilder) {
$scope.persons = $resource('data.json').query();
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
});
data.json
[{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
},
...
]