Add DTColumnDefBuilder

Author: l-lin

demo/angularWayWithOptions.js

@@ -4,8 +4,13 @@
  */
 (function() {
     'use strict';
-    angular.module('datatablesSampleApp').controller('angularWayWithOptionsCtrl', function ($scope, $resource, DTOptionsBuilder) {
+    angular.module('datatablesSampleApp').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()
+        ];
     });
 })();

demo/partials/angular_way_with_options.html

@@ -7,13 +7,40 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way with options</h1>
             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>
+                If you use the Angular way of rendering the table along with the Ajax or the promise solution, the latter
+                will be display.
+            </li>
+            <li>
+                The Angular way is less efficient than fetching the data with the Ajax/promise solutions. The lack of
+                performance is due to the fact that Angular add the 2 way databinding to the data, which the ajax/promise solutions
+                does not. However, you can use Angular directive (<code>ng-click</code>, <code>ng-controller</code>...) in there!
+            </li>
+            <li>
+                Don't forget to set the properties <code>ng</code> in the directive <code>datatable</code> and the <code>dt-rows</code>
+                in order to tell the directive to use the Angular way!
+            </li>
+            <li class="text-danger">
+                <i class="fa fa-warning"></i>&nbsp;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 columnn, 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">
-                        <table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover">
+                        <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
                             <thead>
                             <tr>
                                 <th>ID</th>
@@ -35,7 +62,7 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way with options</h1>
             <tab heading="HTML">
 <div hljs>
 <div ng-controller="angularWayWithOptionsCtrl">
-    <table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover">
+    <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
         <thead>
         <tr>
             <th>ID</th>
@@ -57,36 +84,17 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way with options</h1>
             <tab heading="JS">
 <div hljs language="js">
 angular.module('datatablesSampleApp', ['ngResource', 'datatables'])
-.controller('angularWayWithOptionsCtrl', function ($scope, $resource, DTOptionsBuilder) {
+.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()
+    ];
 });
 </div>
             </tab>
         </tabset>
     </section>
-
-    <section class="article-content">
-        <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>
-                If you use the Angular way of rendering the table along with the Ajax or the promise solution, the latter
-                will be display.
-            </li>
-            <li>
-                The Angular way is less efficient than fetching the data with the Ajax/promise solutions. The lack of
-                performance is due to the fact that Angular add the 2 way databinding to the data, which the ajax/promise solutions
-                does not. However, you can use Angular directive (<code>ng-click</code>, <code>ng-controller</code>...) in there!
-            </li>
-            <li>
-                Don't forget to set the properties <code>ng</code> in the directive <code>datatable</code> in order to tell the directive to use
-                the Angular way!
-            </li>
-        </ul>
-    </section>
 </article>