angularWayWithOptions.html

<article class="main-content">
 <header class="article-header">
 <h1><i class="fa fa-play"></i>&nbsp;The Angular way with options</h1>
 </header>
 <section class="article-content">
 <p>
 You can also provide datatable options and datatable column options with the directive
 <code>dt-options</code>:
 </p>
 <p>
 <strong>Note:</strong>
 </p>
 <ul>
 <li>
 The options do not override what you define in your template. It will just append its properties.
 </li>
 <li class="text-danger">
 When using the angular way, you CANNOT use the <code>dt-column</code> 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 column, your must provide the <code>dt-column-defs</code> directive (which corresponds
 to the <a href="https://datatables.net/reference/option/columnDefs">DataTables columnDefs</a>).
 </li>
 </ul>
 </section>
 <section class="showcase">
 <tabset>
 <tab heading="Preview">
 <article class="preview">
 <div ng-controller="AngularWayWithOptionsCtrl as showCase">
 <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
 <thead>
 <tr>
 <th>ID</th>
 <th>FirstName</th>
 <th>LastName</th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="person in showCase.persons">
 <td>{{ person.id }}</td>
 <td>{{ person.firstName }}</td>
 <td>{{ person.lastName }}</td>
 </tr>
 </tbody>
 </table>
 </div>
 </article>
 </tab>
 <tab heading="HTML">
<div hljs>
<div ng-controller="AngularWayWithOptionsCtrl as showCase">
 <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
 <thead>
 <tr>
 <th>ID</th>
 <th>FirstName</th>
 <th>LastName</th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="person in showCase.persons">
 <td>{{ person.id }}</td>
 <td>{{ person.firstName }}</td>
 <td>{{ person.lastName }}</td>
 </tr>
 </tbody>
 </table>
</div>
</div>
 </tab>
 <tab heading="JS">
<div hljs language="js">
angular.module('showcase.angularWay.withOptions', ['datatables', 'ngResource'])
.controller('AngularWayWithOptionsCtrl', AngularWayWithOptionsCtrl);
 
function AngularWayWithOptionsCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) {
 var vm = this;
 vm.persons = [];
 vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);
 vm.dtColumnDefs = [
 DTColumnDefBuilder.newColumnDef(0),
 DTColumnDefBuilder.newColumnDef(1).notVisible(),
 DTColumnDefBuilder.newColumnDef(2).notSortable()
 ];
 $resource('data.json').query().$promise.then(function(persons) {
 vm.persons = persons;
 });
}
</div>
 </tab>
 <tab heading="Example data">
 <p class="example-data">
 <a target="_blank" href="/angular-datatables/data.json" tooltip="data.json">data.json&nbsp;<i class="fa fa-external-link"></i></a>
 </p>
<div hljs language="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"
},
...
]
</div>
 </tab>
 </tabset>
 </section>
</article>