Select all in datatable with angular js

Question

I use this code in my application and I can' t select all:

'use strict';

/**
 * @ngdoc function
 * @name INSIDERSApp.controller:ReferentCtrl
 * @description
 * # ReferentCtrl
 * Controller of the INSIDERSApp
 */
angular.module('INSIDERSApp')
  .controller('ReferentCtrl', function (INSIDERSServices,$log,$scope,DTOptionsBuilder, DTColumnBuilder, $q,$filter) {

      $scope.referents = this;
      $scope.referents.selected = {};

      $scope.referents.selectAll = false;
      $scope.referents.toggleAll = toggleAll;
      $scope.referents.toggleOne = toggleOne;

      var titleHtml = '<input type="checkbox" ng-model="referents.selectAll" ng-click="referents.toggleAll(referents.selectAll, referents.selected)">';

      $scope.referents.dtOptions = DTOptionsBuilder

        .fromFnPromise(function() {
            var defer = $q.defer();
            INSIDERSServices.referents()
                .success(function(data){
                    defer.resolve(data);
                }).error(function(data){
                    $log.error("ERROR can't get liste of referents");
                });
            return defer.promise;
        })
        .withPaginationType('full_numbers')
        .withLightColumnFilter({
                    '1' : {
                        type : 'text'
                    },
                    '2' : {
                        type : 'text'
                    },
                    '3' : {
                        type : 'text'
                    },
                    '4' : {
                        type : 'text'
                    },
                    '5' : {
                        type : 'text'
                    },
                    '6' : {
                        type : 'text'
                    },
                    '7' : {
                        type : 'text'
                    },
                    '8' : {
                        type : 'text'
                    }
                })


        .withOption('paging', true)
        .withOption('searching', true)
        .withOption('info', true)
        .withLanguageSource('app/styles/plugins/datatables/json/French.json')
        .withDOM(
                      "<'row'<'col-sm-7'l><'col-sm-5'f>>" +
                      "<'row'<'col-sm-12'tr>>" +
                      "<'row'<'col-sm-7'i><'col-sm-5'p>>"     
              )
        ;


      $scope.referents.dtColumns = [
            DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable().renderWith(function (data, type, full, meta) {
                $scope.referents.selected[full.id] = false;
                return '<input type="checkbox" ng-model="referents.selected[' + data.id + ']" ng-click="referents.toggleOne(referents.selected)">';
            }),
            DTColumnBuilder.newColumn('nom').withTitle('Nom'),
            DTColumnBuilder.newColumn('prenom').withTitle('Prénom'),
            DTColumnBuilder.newColumn('fonction').withTitle('Fonction'),
            DTColumnBuilder.newColumn('profil').withTitle('Profil'),
            DTColumnBuilder.newColumn('etat').withTitle('MAJ Liste').renderWith(function(data, type) {
                if(data === true) return "Oui";
                else return "Non";
            }),
            DTColumnBuilder.newColumn('dateMaj').withTitle('Date de MAJ Liste').renderWith(function(data, type) {
                return $filter('date')(data, 'dd/MM/yyyy'); //date filter
            }),
            DTColumnBuilder.newColumn('dateRelance').withTitle('Date de relance').renderWith(function(data, type) {
                return $filter('date')(data, 'dd/MM/yyyy'); //date filter
            }),
             DTColumnBuilder.newColumn('dateNotif').withTitle('Date de Notification').renderWith(function(data, type) {
                    return $filter('date')(data, 'dd/MM/yyyy'); //date filter
                })
        ];

      function toggleAll (selectAll, selectedItems) {
          $log.log("IN toggleAll");
            for (var id in selectedItems) {
                if (selectedItems.hasOwnProperty(id)) {
                    selectedItems[id] = selectAll;
                }
            }
        }
        function toggleOne (selectedItems) {
            $log.log("IN toggleOne");
            for (var id in selectedItems) {
                if (selectedItems.hasOwnProperty(id)) {
                    if(!selectedItems[id]) {
                        $scope.referents.selectAll = false;
                        return;
                    }
                }
            }
            $scope.referents.selectAll = false;
        }  
  });


    <div class="main-container content-active">
    <div class="content">
                <div ng-controller="ReferentCtrl as referents">
    <p class="text-danger">You selected the following rows:</p>
    <p>
        </p><pre>{{ referents.selected |json }}</pre>
    <p></p>

    <table datatable="" dt-options="referents.dtOptions" dt-columns="referents.dtColumns" width="100%" class="table table-striped table-bordered"></table></div> </div>

I follow this tutorial: [enter image description here][1] http://l-lin.github.io/angular-datatables/archives/#!/rowSelect

Any help please but it doesn't work!!

Shama · Accepted Answer · 2017-10-16 10:28:05Z

i find the solution: I add 'createdRow' and 'headerCallback' in my code and $compile in my Controller function:

'use strict';

/**
 * @ngdoc function
 * @name INSIDERSApp.controller:ReferentCtrl
 * @description # ReferentCtrl Controller of the INSIDERSApp
 */
angular
		.module('INSIDERSApp')
		.controller(
				'ReferentCtrl',
				function(INSIDERSServices,$compile, $log, $scope, DTOptionsBuilder,
						DTColumnBuilder, $q, $filter) {

					$scope.referents = this;
					$scope.referents.selected = {};

					$scope.referents.selectAll = false;
					$scope.referents.toggleAll = toggleAll;

					$scope.referents.toggleOne = toggleOne;
					
					var titleHtml = '<input type="checkbox" ng-model="referents.selectAll" ng-click="referents.toggleAll(referents.selectAll, referents.selected)">';

					$scope.referents.dtOptions = DTOptionsBuilder

							.fromFnPromise(
									function() {
										var defer = $q.defer();
										INSIDERSServices
												.referents()
												.success(function(data) {
													defer.resolve(data);
												})
												.error(
														function(data) {
															$log
																	.error("ERROR can't get liste of referents");
														});
										return defer.promise;
									})
							.withPaginationType('full_numbers')
							.withLightColumnFilter({
								'1' : {
									type : 'text'
								},
								'2' : {
									type : 'text'
								},
								'3' : {
									type : 'text'
								},
								'4' : {
									type : 'text'
								},
								'5' : {
									type : 'text'
								},
								'6' : {
									type : 'text'
								},
								'7' : {
									type : 'text'
								},
								'8' : {
									type : 'text'
								}
							})

							.withOption('paging', true)
							.withOption('searching', true)
							.withOption('info', true)
							.withOption('createdRow', function(row, data, dataIndex) {
					            $compile(angular.element(row).contents())($scope);
					        })
					        .withOption('headerCallback', function(header) {
					            if (!$scope.referents.headerCompiled) {
					            	$scope.referents.headerCompiled = true;
					                $compile(angular.element(header).contents())($scope);
					            }
					        }) 
							.withLanguageSource(
									'app/styles/plugins/datatables/json/French.json')
							.withDOM(
									"<'row'<'col-sm-7'l><'col-sm-5'f>>"
											+ "<'row'<'col-sm-12'tr>>"
											+ "<'row'<'col-sm-7'i><'col-sm-5'p>>");

					$scope.referents.dtColumns = [
							DTColumnBuilder
									.newColumn(null)
									.withTitle(titleHtml)
									.notSortable()
									.renderWith(
											function(data, type, full, meta) {
												$scope.referents.selected[full.id] = false;
												return '<input type="checkbox" ng-model="referents.selected['
														+ data.id
														+ ']" ng-click="referents.toggleOne(referents.selected)">';
											}),
							DTColumnBuilder.newColumn('nom').withTitle('Nom'),
							DTColumnBuilder.newColumn('prenom').withTitle(
									'Prénom'),
							DTColumnBuilder.newColumn('fonction').withTitle(
									'Fonction'),
							DTColumnBuilder.newColumn('profil').withTitle(
									'Profil'),
							DTColumnBuilder.newColumn('etat').withTitle(
									'MAJ Liste').renderWith(
									function(data, type) {
										if (data === true)
											return "Oui";
										else
											return "Non";
									}),
							DTColumnBuilder.newColumn('dateMaj').withTitle(
									'Date de MAJ Liste').renderWith(
									function(data, type) {
										return $filter('date')(data,
												'dd/MM/yyyy'); // date filter
									}),
							DTColumnBuilder.newColumn('dateRelance').withTitle(
									'Date de relance').renderWith(
									function(data, type) {
										return $filter('date')(data,
												'dd/MM/yyyy'); // date filter
									}),
							DTColumnBuilder.newColumn('dateNotif').withTitle(
									'Date de Notification').renderWith(
									function(data, type) {
										return $filter('date')(data,
												'dd/MM/yyyy'); // date filter
									}) ];

					function toggleAll(selectAll, selectedItems) {
						$log.log("IN toggleAll");
						for ( var id in selectedItems) {
							if (selectedItems.hasOwnProperty(id)) {
								selectedItems[id] = selectAll;
							}
						}
						
						
					}
					function toggleOne(selectedItems) {
						$log.log("IN toggleOne");
						for ( var id in selectedItems) {
							if (selectedItems.hasOwnProperty(id)) {
								if (!selectedItems[id]) {
									$scope.referents.selectAll = false;
									return;
								}
							}
						}
						$scope.referents.selectAll = true;
					}

				});

<div class="main-container content-active">
    <div class="content">
				<div ng-controller="ReferentCtrl as referents">
    <p class="text-danger">You selected the following rows:</p>
    <p>
        </p><pre>{{ referents.selected |json }}</pre>
        
    <p></p>
				
    <table datatable="" dt-options="referents.dtOptions" dt-columns="referents.dtColumns" width="100%" class="table table-striped table-bordered dataTable no-footer"></table>
                 </div>
                 
                 </div>
        
     </div>

I use this method, But after refresh datatable by draw(), it doesn't work! Did you have any idea?

Collectives™ on Stack Overflow

Select all in datatable with angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related