Improve doc #245

Author: l-lin

demo/advanced/rowSelect.html

@@ -36,18 +36,30 @@ <h1><i class="fa fa-play"></i>&nbsp;Selecting rows</h1>
 function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
     var vm = this;
     vm.selected = {};
+    vm.selectAll = false;
     vm.toggleAll = toggleAll;
+
+    var titleHtml = '<input type="checkbox" ng-model="showCase.selectAll" ng-click="showCase.toggleAll(showCase.selectAll, showCase.selected)">';
+
     vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
             return $resource('data1.json').query().$promise;
         })
         .withOption('createdRow', function(row, data, dataIndex) {
             // Recompiling so we can bind Angular directive to the DT
             $compile(angular.element(row).contents())($scope);
         })
+        .withOption('headerCallback', function(header) {
+            if (!$scope.headerCompiled) {
+                // Use this headerCompiled field to only compile header once
+                $scope.headerCompiled = true;
+                $compile(angular.element(header).contents())($scope);
+            }
+        })
         .withPaginationType('full_numbers');
     vm.dtColumns = [
-        DTColumnBuilder.newColumn(null).withTitle('').notSortable()
+        DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
             .renderWith(function(data, type, full, meta) {
+                vm.selected[full.id] = false;
                 return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']"/>';
             }),
         DTColumnBuilder.newColumn('id').withTitle('ID'),
@@ -61,14 +73,12 @@ <h1><i class="fa fa-play"></i>&nbsp;Selecting rows</h1>
         });
     });
 
-    var _toggle = true;
-    function toggleAll() {
-        for (var prop in vm.selected) {
-           if (vm.selected.hasOwnProperty(prop)) {
-               vm.selected[prop] = _toggle;
-           }
+    function toggleAll (selectAll, selectedItems) {
+        for (var id in selectedItems) {
+            if (selectedItems.hasOwnProperty(id)) {
+                selectedItems[id] = selectAll;
+            }
         }
-        _toggle = !_toggle;
     }
 }
 </div>

demo/advanced/rowSelect.js

@@ -7,21 +7,20 @@ function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilde
     vm.selected = {};
     vm.selectAll = false;
     vm.toggleAll = toggleAll;
-    vm.toggleOne = toggleOne;
 
     var titleHtml = '<input type="checkbox" ng-model="showCase.selectAll"' +
         'ng-click="showCase.toggleAll(showCase.selectAll, showCase.selected)">';
 
     vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
-        return $resource('data1.json').query().$promise;
-    })
+            return $resource('data1.json').query().$promise;
+        })
         .withOption('createdRow', function(row, data, dataIndex) {
             // Recompiling so we can bind Angular directive to the DT
             $compile(angular.element(row).contents())($scope);
         })
         .withOption('headerCallback', function(header) {
             if (!$scope.headerCompiled) {
-                //use this headerCompiled field to only compile header once
+                // Use this headerCompiled field to only compile header once
                 $scope.headerCompiled = true;
                 $compile(angular.element(header).contents())($scope);
             }
@@ -31,8 +30,7 @@ function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilde
         DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
             .renderWith(function(data, type, full, meta) {
                 vm.selected[full.id] = false;
-                return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']"' +
-                    'ng-click="showCase.toggleOne(showCase.selected)"/>';
+                return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']"/>';
             }),
         DTColumnBuilder.newColumn('id').withTitle('ID'),
         DTColumnBuilder.newColumn('firstName').withTitle('First name'),
@@ -51,18 +49,5 @@ function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilde
                 selectedItems[id] = selectAll;
             }
         }
-    };
-
-    function toggleOne (selectedItems) {
-        var me = this;
-        for (var id in selectedItems) {
-            if (selectedItems.hasOwnProperty(id)) {
-                if(!selectedItems[id]) {
-                    me.selectAll = false;
-                    return;
-                }
-            }
-        }
-        me.selectAll = true;
-    };
+    }
 }