Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 59686b1

Browse files
l-linl-lin
committed
Add example to select rows #163 
1 parent 89d5bc6 commit 59686b1

8 files changed

+133
-3
lines changed

‎demo/advanced/rowSelect.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;Selecting rows</h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
Simple example to select rows.
8+
</p>
9+
</section>
10+
<section class="showcase">
11+
<tabset>
12+
<tab heading="Preview">
13+
<article class="preview">
14+
<div ng-controller="RowSelectCtrl as showCase">
15+
<p>
16+
<button class="btn btn-primary" ng-click="showCase.toggleAll()">Select/Remove all</button>
17+
</p>
18+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
19+
</div>
20+
</article>
21+
</tab>
22+
<tab heading="HTML">
23+
<div hljs>
24+
<div ng-controller="RowSelectCtrl as showCase">
25+
<p>
26+
<button class="btn btn-primary" ng-click="showCase.toggleAll()">Select/Remove all</button>
27+
</p>
28+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
29+
</div>
30+
</div>
31+
</tab>
32+
<tab heading="JS">
33+
<div hljs language="js">
34+
angular.module('datatablesSampleApp', ['datatables']).controller('RowSelectCtrl', RowSelect);
35+
36+
function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder) {
37+
var vm = this;
38+
vm.selected = {};
39+
vm.toggleAll = toggleAll;
40+
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
41+
return $resource('data.json').query().$promise;
42+
})
43+
.withOption('createdRow', function(row, data, dataIndex) {
44+
// Recompiling so we can bind Angular directive to the DT
45+
$compile(angular.element(row).contents())($scope);
46+
})
47+
.withPaginationType('full_numbers');
48+
vm.dtColumns = [
49+
DTColumnBuilder.newColumn(null).withTitle('').notSortable()
50+
.renderWith(function(data, type, full, meta) {
51+
return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']"/>';
52+
}),
53+
DTColumnBuilder.newColumn('id').withTitle('ID'),
54+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
55+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
56+
];
57+
58+
$scope.$on('event:dataTableLoaded', function(evt, loadedDT) {
59+
loadedDT.DataTable.data().each(function(data) {
60+
vm.selected[data.id] = false;
61+
});
62+
});
63+
64+
var _toggle = true;
65+
function toggleAll() {
66+
for (var prop in vm.selected) {
67+
if (vm.selected.hasOwnProperty(prop)) {
68+
vm.selected[prop] = _toggle;
69+
}
70+
}
71+
_toggle = !_toggle;
72+
}
73+
}
74+
</div>
75+
</tab>
76+
</tabset>
77+
</section>
78+
</article>

‎demo/advanced/rowSelect.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use strict';
2+
angular.module('datatablesSampleApp').controller('RowSelectCtrl', RowSelect);
3+
4+
function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder) {
5+
var vm = this;
6+
vm.selected = {};
7+
vm.toggleAll = toggleAll;
8+
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
9+
return $resource('data.json').query().$promise;
10+
})
11+
.withOption('createdRow', function(row, data, dataIndex) {
12+
// Recompiling so we can bind Angular directive to the DT
13+
$compile(angular.element(row).contents())($scope);
14+
})
15+
.withPaginationType('full_numbers');
16+
vm.dtColumns = [
17+
DTColumnBuilder.newColumn(null).withTitle('').notSortable()
18+
.renderWith(function(data, type, full, meta) {
19+
return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']"/>';
20+
}),
21+
DTColumnBuilder.newColumn('id').withTitle('ID'),
22+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
23+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
24+
];
25+
26+
$scope.$on('event:dataTableLoaded', function(evt, loadedDT) {
27+
loadedDT.DataTable.data().each(function(data) {
28+
vm.selected[data.id] = false;
29+
});
30+
});
31+
32+
var _toggle = true;
33+
function toggleAll() {
34+
for (var prop in vm.selected) {
35+
if (vm.selected.hasOwnProperty(prop)) {
36+
vm.selected[prop] = _toggle;
37+
}
38+
}
39+
_toggle = !_toggle;
40+
}
41+
}

‎demo/usages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ angular.module('datatablesSampleApp.usages', ['ngResource'])
3838
}, {
3939
name: 'rowClickEvent',
4040
label: 'Row click event'
41+
}, {
42+
name: 'rowSelect',
43+
label: 'Selecting rows'
4144
}, {
4245
name: 'bindAngularDirective',
4346
label: 'Bind Angular directive'

‎dist/angular-datatables.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -532,7 +532,7 @@ function dataTable($q, DTBootstrap, DTRendererFactory, DTRendererService, DTProp
532532
DTBootstrap.deIntegrate();
533533
}
534534
}
535-
return DTPropertyUtil.resolveObjectPromises(options, ['data', 'aaData']);
535+
return DTPropertyUtil.resolveObjectPromises(options, ['data', 'aaData', 'fnPromise']);
536536
}).then(function (options) {
537537
defer.resolve(options);
538538
});

‎dist/angular-datatables.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ <h1>
9797
<script src="demo/advanced/dataReloadWithAjax.js"></script>
9898
<script src="demo/advanced/dataReloadWithPromise.js"></script>
9999
<script src="demo/advanced/rowClickEvent.js"></script>
100+
<script src="demo/advanced/rowSelect.js"></script>
100101
<script src="demo/advanced/serverSideProcessing.js"></script>
101102
<script src="demo/advanced/loadOptionsWithPromise.js"></script>
102103
<script src="demo/advanced/disableDeepWatchers.js"></script>

‎src/angular-datatables.directive.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ function dataTable($q, DTBootstrap, DTRendererFactory, DTRendererService, DTProp
9595
DTBootstrap.deIntegrate();
9696
}
9797
}
98-
return DTPropertyUtil.resolveObjectPromises(options, ['data', 'aaData']);
98+
return DTPropertyUtil.resolveObjectPromises(options, ['data', 'aaData', 'fnPromise']);
9999
}).then(function (options) {
100100
defer.resolve(options);
101101
});

‎styles/main.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,13 @@ pre code {
253253
border-bottom: 1px solid #c2c2c2;
254254
}
255255

256+
.truncate {
257+
width: 250px;
258+
white-space: nowrap;
259+
overflow: hidden;
260+
text-overflow: ellipsis;
261+
}
262+
256263
/* ---------------------------------------- */
257264
/* Sidebar
258265
/* ---------------------------------------- */

0 commit comments

Comments
 (0)