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

Commit e3ac882

Browse files
l-linl-lin
committed
Add the possibility to add/edit/remove row when using the "Angular way" 😤 #16 #54 
1 parent 852503b commit e3ac882

16 files changed

+572
-120
lines changed

‎demo/angularWayDataChange.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 17:04
4+
*/
5+
(function () {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('angularWayChangeDataCtrl', function ($scope, $resource, DTOptionsBuilder, DTColumnDefBuilder) {
8+
var _buildPerson2Add = function (id) {
9+
return {
10+
id: id,
11+
firstName: 'Foo' + id,
12+
lastName: 'Bar' + id
13+
}
14+
};
15+
16+
$scope.persons = $resource('data1.json').query();
17+
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
18+
$scope.dtColumnDefs = [
19+
DTColumnDefBuilder.newColumnDef(0),
20+
DTColumnDefBuilder.newColumnDef(1),
21+
DTColumnDefBuilder.newColumnDef(2),
22+
DTColumnDefBuilder.newColumnDef(3).notSortable()
23+
];
24+
25+
$scope.person2Add = _buildPerson2Add(1);
26+
$scope.addPerson = function () {
27+
$scope.persons.push(angular.copy($scope.person2Add));
28+
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
29+
};
30+
$scope.editPerson = function ($index) {
31+
// BEWARE: $scope.persons[$index] = $scope.person2Add; does not work!
32+
$scope.persons[$index].id = $scope.person2Add.id;
33+
$scope.persons[$index].firstName = $scope.person2Add.firstName;
34+
$scope.persons[$index].lastName = $scope.person2Add.lastName;
35+
};
36+
$scope.removePerson = function ($index) {
37+
$scope.persons.splice($index, 1);
38+
};
39+
});
40+
})();

‎demo/app.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,13 @@
8787
$rootScope.$broadcast('event:changeView', 'angularWayWithOptions');
8888
}
8989
})
90+
.state('angularWayDataChange', {
91+
url: '/angularWayDataChange',
92+
templateUrl: 'demo/partials/angular_way_data_change.html',
93+
controller: function($rootScope) {
94+
$rootScope.$broadcast('event:changeView', 'angularWayDataChange');
95+
}
96+
})
9097
.state('withColReorder', {
9198
url: '/withColReorder',
9299
templateUrl: 'demo/partials/with_col_reorder.html',
@@ -168,7 +175,7 @@
168175
})
169176
.factory('DTLoadingTemplate', function() {
170177
return {
171-
html: '<h3>Loading great stuffs!!!</h3>'
178+
html: '<img src="images/loading.gif" />'
172179
};
173180
});
174181

‎demo/partials/angular_way.html

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,35 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way</h1>
55
<section class="article-content">
66
<p>
77
You can construct your table the "angular" way, eg using the directive <code>ng-repeat</code> on <code>tr</code> tag.
8-
All you need to do is to add the directive <code>datatable</code> with the value <code>ng</code> and <code>dt-rows</code> on your table in order
8+
All you need to do is to add the directive <code>datatable</code> with the value <code>ng</code> on your table in order
99
to make it rendered with DataTables.
1010
</p>
11+
<p>
12+
<strong>Note:</strong>
13+
</p>
14+
<ul>
15+
<li>
16+
If you use the Angular way of rendering the table along with the Ajax or the promise solution, the latter
17+
will be display.
18+
</li>
19+
<li>
20+
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!
21+
</li>
22+
<li class="text-warning">
23+
<i class="fa fa-warning"></i>&nbsp;As of v0.1.0, the directive <code>dtRows</code> is deprecated.
24+
This directive is no longer needed. It will be removed completely from v0.2.0
25+
</li>
26+
</ul>
27+
<div class="alert alert-danger">
28+
<p>
29+
The "Angular way" is <strong>REALLY less efficient</strong> than fetching the data with the Ajax/promise solutions. The lack of
30+
performance is due to the fact that Angular add the 2 way databinding to the data, which the ajax/promise solutions
31+
does not. However, you can use Angular directives (<code>ng-click</code>, <code>ng-controller</code>...) in there!
32+
</p>
33+
<p>
34+
If your DataTable has a lot of rows, I <strong>STRONGLY</strong> advice you to use the Ajax solutions.
35+
</p>
36+
</div>
1137
</section>
1238
<section class="showcase">
1339
<tabset>
@@ -23,7 +49,7 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way</h1>
2349
</tr>
2450
</thead>
2551
<tbody>
26-
<tr dt-rows ng-repeat="person in persons">
52+
<tr ng-repeat="person in persons">
2753
<td>{{ person.id }}</td>
2854
<td>{{ person.firstName }}</td>
2955
<td>{{ person.lastName }}</td>
@@ -45,7 +71,7 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way</h1>
4571
</tr>
4672
</thead>
4773
<tbody>
48-
<tr dt-rows ng-repeat="person in persons">
74+
<tr ng-repeat="person in persons">
4975
<td>{{ person.id }}</td>
5076
<td>{{ person.firstName }}</td>
5177
<td>{{ person.lastName }}</td>

‎demo/partials/angular_way_data_change.html

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
It's quite simple. You just need to do it like usual, ie you just need to deal with your array of data.
8+
</p>
9+
<p class="text-info">
10+
<i class="fa fa-info-circle"></i>&nbsp;However, take in mind that when updating the array of data,
11+
the whole DataTable is completely destroyed and then rebuilt. The filter, sort, pagination, and so on... are
12+
not preserved.
13+
</p>
14+
</section>
15+
<section class="showcase">
16+
<tabset>
17+
<tab heading="Preview">
18+
<article class="preview">
19+
<div ng-controller="angularWayChangeDataCtrl">
20+
<form class="form-inline" ng-submit="addPerson()">
21+
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
22+
<thead>
23+
<tr>
24+
<th>
25+
<div class="form-group">
26+
<label>
27+
<input class="form-control" type="number" name="id" ng-model="person2Add.id" value=""/>
28+
</label>
29+
</div>
30+
</th>
31+
<th>
32+
<div class="form-group">
33+
<label>
34+
<input type="text" class="form-control" name="firstName" ng-model="person2Add.firstName" value=""/>
35+
</label>
36+
</div>
37+
</th>
38+
<th>
39+
<div class="form-group">
40+
<label>
41+
<input type="text" class="form-control" name="lastName" ng-model="person2Add.lastName" value=""/>
42+
</label>
43+
</div>
44+
</th>
45+
<th>
46+
<div class="form-group">
47+
<button type="submit" class="btn btn-success"><i class="fa fa-plus"></i></button>
48+
</div>
49+
</th>
50+
</tr>
51+
<tr>
52+
<th>ID</th>
53+
<th>FirstName</th>
54+
<th>LastName</th>
55+
<th>Actions</th>
56+
</tr>
57+
</thead>
58+
<tbody>
59+
<tr ng-repeat="person in persons">
60+
<td>{{ person.id }}</td>
61+
<td>{{ person.firstName }}</td>
62+
<td>{{ person.lastName }}</td>
63+
<td>
64+
<button type="button" class="btn btn-warning" ng-click="editPerson($index)"><i class="fa fa-edit"></i></button>
65+
<button type="button" class="btn btn-danger" ng-click="removePerson($index)"><i class="fa fa-trash-o"></i></button>
66+
</td>
67+
</tr>
68+
</tbody>
69+
</table>
70+
</form>
71+
</div>
72+
</article>
73+
</tab>
74+
<tab heading="HTML">
75+
<div hljs>
76+
<div ng-controller="angularWayChangeDataCtrl">
77+
<form class="form-inline" ng-submit="addPerson()">
78+
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
79+
<thead>
80+
<tr>
81+
<th>
82+
<div class="form-group">
83+
<label>
84+
<input autofocus class="form-control" type="number" name="id" ng-model="person2Add.id" value=""/>
85+
</label>
86+
</div>
87+
</th>
88+
<th>
89+
<div class="form-group">
90+
<label>
91+
<input type="text" class="form-control" name="firstName" ng-model="person2Add.firstName" value=""/>
92+
</label>
93+
</div>
94+
</th>
95+
<th>
96+
<div class="form-group">
97+
<label>
98+
<input type="text" class="form-control" name="lastName" ng-model="person2Add.lastName" value=""/>
99+
</label>
100+
</div>
101+
</th>
102+
<th>
103+
<div class="form-group">
104+
<button type="submit" class="btn btn-success"><i class="fa fa-plus"></i></button>
105+
</div>
106+
</th>
107+
</tr>
108+
<tr>
109+
<th>ID</th>
110+
<th>FirstName</th>
111+
<th>LastName</th>
112+
<th>Actions</th>
113+
</tr>
114+
</thead>
115+
<tbody>
116+
<tr ng-repeat="person in persons">
117+
<td>{{ person.id }}</td>
118+
<td>{{ person.firstName }}</td>
119+
<td>{{ person.lastName }}</td>
120+
<td>
121+
<button type="button" class="btn btn-warning" ng-click="editPerson($index)"><i class="fa fa-edit"></i></button>
122+
<button type="button" class="btn btn-danger" ng-click="removePerson($index)"><i class="fa fa-trash-o"></i></button>
123+
</td>
124+
</tr>
125+
</tbody>
126+
</table>
127+
</form>
128+
</div>
129+
</div>
130+
</tab>
131+
<tab heading="JS">
132+
<div hljs language="js">
133+
angular.module('datatablesSampleApp', ['ngResource', 'datatables']).
134+
controller('angularWayChangeDataCtrl', function ($scope, $resource, DTOptionsBuilder, DTColumnDefBuilder) {
135+
var _buildPerson2Add = function (id) {
136+
return {
137+
id: id,
138+
firstName: 'Foo' + id,
139+
lastName: 'Bar' + id
140+
}
141+
};
142+
143+
$scope.persons = $resource('data1.json').query();
144+
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
145+
$scope.dtColumnDefs = [
146+
DTColumnDefBuilder.newColumnDef(0),
147+
DTColumnDefBuilder.newColumnDef(1),
148+
DTColumnDefBuilder.newColumnDef(2),
149+
DTColumnDefBuilder.newColumnDef(3).notSortable()
150+
];
151+
152+
$scope.person2Add = _buildPerson2Add(1);
153+
$scope.addPerson = function () {
154+
$scope.persons.push(angular.copy($scope.person2Add));
155+
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
156+
};
157+
$scope.editPerson = function ($index) {
158+
// BEWARE: $scope.persons[$index] = $scope.person2Add; does not work!
159+
$scope.persons[$index].id = $scope.person2Add.id;
160+
$scope.persons[$index].firstName = $scope.person2Add.firstName;
161+
$scope.persons[$index].lastName = $scope.person2Add.lastName;
162+
};
163+
$scope.removePerson = function ($index) {
164+
$scope.persons.splice($index, 1);
165+
};
166+
});
167+
</div>
168+
</tab>
169+
</tabset>
170+
</section>
171+
</article>

‎demo/partials/angular_way_with_options.html

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,6 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way with options</h1>
1414
<li>
1515
The options do not override what you define in your template. It will just append its properties.
1616
</li>
17-
<li>
18-
If you use the Angular way of rendering the table along with the Ajax or the promise solution, the latter
19-
will be display.
20-
</li>
21-
<li>
22-
The Angular way is less efficient than fetching the data with the Ajax/promise solutions. The lack of
23-
performance is due to the fact that Angular add the 2 way databinding to the data, which the ajax/promise solutions
24-
does not. However, you can use Angular directive (<code>ng-click</code>, <code>ng-controller</code>...) in there!
25-
</li>
26-
<li>
27-
Don't forget to set the properties <code>ng</code> in the directive <code>datatable</code> and the <code>dt-rows</code>
28-
in order to tell the directive to use the Angular way!
29-
</li>
30-
<li class="text-danger">
31-
It is <strong>NOT</strong> possible to add/edit/delete rows when using the angular way. Indeed, DataTables does not include the
32-
two-way-databinding natively. It renders only once and after you have to manually refresh your data.
33-
So this issue is quite challenging and it's not implemented (yet? Don't know if I'm planning to do it.)
34-
For now it's best that you use the <a href="http://editor.datatables.net/examples/styling/envelopeInTable.html">datatable editor</a>.
35-
</li>
3617
<li class="text-danger">
3718
When using the angular way, you CANNOT use the <code>dt-column</code> directive. Indeed,
3819
the module will render the datatable after the promise is resolved. So for DataTables, it's like rendering a static table.
@@ -55,7 +36,7 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way with options</h1>
5536
</tr>
5637
</thead>
5738
<tbody>
58-
<tr dt-rows ng-repeat="person in persons">
39+
<tr ng-repeat="person in persons">
5940
<td>{{ person.id }}</td>
6041
<td>{{ person.firstName }}</td>
6142
<td>{{ person.lastName }}</td>
@@ -77,7 +58,7 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way with options</h1>
7758
</tr>
7859
</thead>
7960
<tbody>
80-
<tr dt-rows ng-repeat="person in persons">
61+
<tr ng-repeat="person in persons">
8162
<td>{{ person.id }}</td>
8263
<td>{{ person.firstName }}</td>
8364
<td>{{ person.lastName }}</td>

‎demo/partials/data_reload_with_ajax.html

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,29 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from an Ajax sour
2424
<tab heading="Preview">
2525
<article class="preview">
2626
<div ng-controller="dataReloadWithAjaxCtrl">
27-
<input ng-click="reloadData()" type="button" value="Reload data"/>
28-
<input ng-click="changeData()" type="button" value="Change data"/>
27+
<p>
28+
<button ng-click="reloadData()" type="button" class="btn btn-info">
29+
<i class="fa fa-refresh"></i>&nbsp;Reload data
30+
</button>
31+
<button ng-click="changeData()" type="button" class="btn btn-info">
32+
<i class="fa fa-exchange"></i>&nbsp;Change data
33+
</button>
34+
</p>
2935
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
3036
</div>
3137
</article>
3238
</tab>
3339
<tab heading="HTML">
3440
<div hljs language="html">
3541
<div ng-controller="dataReloadWithAjaxCtrl">
36-
<input ng-click="reloadData()" type="button" value="Reload data"/>
37-
<input ng-click="changeData()" type="button" value="Change data"/>
42+
<p>
43+
<button ng-click="reloadData()" type="button" class="btn btn-info">
44+
<i class="fa fa-refresh"></i>&nbsp;Reload data
45+
</button>
46+
<button ng-click="changeData()" type="button" class="btn btn-info">
47+
<i class="fa fa-exchange"></i>&nbsp;Change data
48+
</button>
49+
</p>
3850
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
3951
</div>
4052
</div>

0 commit comments

Comments
 (0)