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

Commit f768a9f

Browse files
l-linl-lin
committed
Add a service to provide the DT instances #174 
1 parent 68ae8cc commit f768a9f

21 files changed

+463
-221
lines changed

‎README.md

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,26 +73,38 @@ Additional notes
7373
----------------
7474

7575
* [RequireJS](http://requirejs.org/) is not supported.
76-
* Each time a datatable is rendered, a message is sent to the parent scopes with the id of the table and the DataTable itself.
76+
* A DataTable directive instance is created each time a DataTable is rendered. You can fetch it by calling the service
77+
`DTInstances.getLast()` to fetch the last instance or `DTInstance.getList()` to fetch the entire list of instances.
7778

78-
For instance, for the given dataTable:
79+
For instance, for the given dataTables:
7980

8081
```html
8182
<table id="foobar" datatable dt-options="dtOptions" dt-columns="dtColumns"></table>
83+
<table id="foobar2" datatable dt-options="dtOptions" dt-columns="dtColumns"></table>
8284
```
8385

84-
You can catch the event like this in your parent directive or controller:
86+
You can fetch the instances like this:
8587

8688
```js
87-
$scope.$on('event:dataTableLoaded', function(event, loadedDT) {
88-
// loadedDT === {"id": "foobar", "DataTable": oTable, "dataTable": $oTable}
89-
89+
DTInstances.getLast().then(function(lastDTInstance) {
90+
// lastDTInstance === {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable}
91+
9092
// loadedDT.DataTable is the DataTable API instance
9193
// loadedDT.dataTable is the jQuery Object
9294
// See http://datatables.net/manual/api#Accessing-the-API
9395
});
96+
DTInstances.getList().then(function(dtInstances) {
97+
/*
98+
* dtInstances === {
99+
* "foobar": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable},
100+
* "foobar2": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable}
101+
* }
102+
*/
103+
});
94104
```
95105

106+
For more information, please check the [documentation](http://l-lin.github.io/angular-datatables/#/api).
107+
96108
* `Angular Datatables` is using [Object.create()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create) to instanciate options and columns.
97109
* If you need to support IE8, then you need to add this [Polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Polyfill).
98110

‎archives/v0.2.1/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.

‎archives/v0.3.0/dist/angular-datatables.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -901,7 +901,7 @@
901901
$elem.show();
902902
$loading.hide();
903903
},
904-
renderDataTableAndEmitEvent: function ($elem, options, $scope) {
904+
renderDataTableAndRegisterInstance: function ($elem, options, $scope) {
905905
var dtId = '#' + $elem.attr('id');
906906
if ($.fn.dataTable.isDataTable(dtId)) {
907907
options.destroy = true;
@@ -917,7 +917,7 @@
917917
},
918918
doRenderDataTable: function ($elem, options, $scope) {
919919
this.hideLoading($elem);
920-
return this.renderDataTableAndEmitEvent($elem, options, $scope);
920+
return this.renderDataTableAndRegisterInstance($elem, options, $scope);
921921
}
922922
};
923923
}
@@ -1030,7 +1030,7 @@
10301030
oTable.clear();
10311031
oTable.rows.add(options.aaData).draw();
10321032
} else {
1033-
oTable = DTRendererService.renderDataTableAndEmitEvent($elem, options, $scope);
1033+
oTable = DTRendererService.renderDataTableAndRegisterInstance($elem, options, $scope);
10341034
}
10351035
}, 0, false);
10361036
};
@@ -1118,7 +1118,7 @@
11181118
var ajaxUrl = options.sAjaxSource || options.ajax.url || options.ajax;
11191119
oTable.ajax.url(ajaxUrl).load();
11201120
} else {
1121-
oTable = DTRendererService.renderDataTableAndEmitEvent($elem, options, $scope);
1121+
oTable = DTRendererService.renderDataTableAndRegisterInstance($elem, options, $scope);
11221122
}
11231123
}, 0, false);
11241124
};
@@ -1195,4 +1195,4 @@
11951195
}
11961196
};
11971197
});
1198-
}(window, document, jQuery, angular));
1198+
}(window, document, jQuery, angular));

‎archives/v0.3.0/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.

‎archives/v0.3.1/dist/angular-datatables.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1305,7 +1305,7 @@ function dtRendererService(DTLoadingTemplate) {
13051305
getLoadingElem: getLoadingElem,
13061306
showLoading: showLoading,
13071307
hideLoading: hideLoading,
1308-
renderDataTableAndEmitEvent: renderDataTableAndEmitEvent,
1308+
renderDataTableAndRegisterInstance: renderDataTableAndEmitEvent,
13091309
doRenderDataTable: doRenderDataTable
13101310
};
13111311
return rendererService;
@@ -1504,7 +1504,7 @@ function dtPromiseRenderer($timeout, DTRenderer, DTRendererService) {
15041504
oTable.clear();
15051505
oTable.rows.add(options.aaData).draw();
15061506
} else {
1507-
oTable = DTRendererService.renderDataTableAndEmitEvent($elem, options, $scope);
1507+
oTable = DTRendererService.renderDataTableAndRegisterInstance($elem, options, $scope);
15081508
}
15091509
}, 0, false);
15101510
}
@@ -1567,10 +1567,10 @@ function dtAjaxRenderer($timeout, DTRenderer, DTRendererService, DT_DEFAULT_OPTI
15671567
} else {
15681568
if (_shouldDeferRender(options)) {
15691569
$timeout(function () {
1570-
oTable = DTRendererService.renderDataTableAndEmitEvent($elem, options, $scope);
1570+
oTable = DTRendererService.renderDataTableAndRegisterInstance($elem, options, $scope);
15711571
}, 0, false);
15721572
} else {
1573-
oTable = DTRendererService.renderDataTableAndEmitEvent($elem, options, $scope);
1573+
oTable = DTRendererService.renderDataTableAndRegisterInstance($elem, options, $scope);
15741574
}
15751575
}
15761576
}
@@ -1732,4 +1732,4 @@ function dtPropertyUtil($q) {
17321732
dtPropertyUtil.$inject = ['$q'];
17331733

17341734

1735-
})(window, document, jQuery, angular);
1735+
})(window, document, jQuery, angular);

‎archives/v0.3.1/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.

‎demo/advanced/rowSelect.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Selecting rows</h1>
1212
<tab heading="Preview">
1313
<article class="preview">
1414
<div ng-controller="RowSelectCtrl as showCase">
15+
<p class="text-danger">You selected the following rows: <strong>{{ showCase.selected }}</strong></p>
1516
<p>
1617
<button class="btn btn-primary" ng-click="showCase.toggleAll()">Select/Remove all</button>
1718
</p>
@@ -22,6 +23,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Selecting rows</h1>
2223
<tab heading="HTML">
2324
<div hljs>
2425
<div ng-controller="RowSelectCtrl as showCase">
26+
<p class="text-danger">You selected the following rows: <strong>{{ showCase.selected }}</strong></p>
2527
<p>
2628
<button class="btn btn-primary" ng-click="showCase.toggleAll()">Select/Remove all</button>
2729
</p>
@@ -33,13 +35,13 @@ <h1><i class="fa fa-play"></i>&nbsp;Selecting rows</h1>
3335
<div hljs language="js">
3436
angular.module('datatablesSampleApp', ['datatables']).controller('RowSelectCtrl', RowSelect);
3537

36-
function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder) {
38+
function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
3739
var vm = this;
3840
vm.selected = {};
3941
vm.toggleAll = toggleAll;
4042
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
41-
return $resource('data.json').query().$promise;
42-
})
43+
return $resource('data1.json').query().$promise;
44+
})
4345
.withOption('createdRow', function(row, data, dataIndex) {
4446
// Recompiling so we can bind Angular directive to the DT
4547
$compile(angular.element(row).contents())($scope);
@@ -55,8 +57,8 @@ <h1><i class="fa fa-play"></i>&nbsp;Selecting rows</h1>
5557
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
5658
];
5759

58-
$scope.$on('event:dataTableLoaded', function(evt, loadedDT) {
59-
loadedDT.DataTable.data().each(function(data) {
60+
DTInstances.getLast().then(function (dtInstance) {
61+
dtInstance.DataTable.data().each(function(data) {
6062
vm.selected[data.id] = false;
6163
});
6264
});

‎demo/advanced/rowSelect.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
'use strict';
22
angular.module('datatablesSampleApp').controller('RowSelectCtrl', RowSelect);
33

4-
function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder) {
4+
function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
55
var vm = this;
66
vm.selected = {};
77
vm.toggleAll = toggleAll;
88
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
9-
return $resource('data.json').query().$promise;
9+
return $resource('data1.json').query().$promise;
1010
})
1111
.withOption('createdRow', function(row, data, dataIndex) {
1212
// Recompiling so we can bind Angular directive to the DT
@@ -23,8 +23,8 @@ function RowSelect($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilde
2323
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
2424
];
2525

26-
$scope.$on('event:dataTableLoaded', function(evt, loadedDT) {
27-
loadedDT.DataTable.data().each(function(data) {
26+
DTInstances.getLast().then(function (dtInstance) {
27+
dtInstance.DataTable.data().each(function(data) {
2828
vm.selected[data.id] = false;
2929
});
3030
});

‎demo/api/api.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ <h1><i class="fa fa-code"></i>&nbsp;API</h1>
2121
<tab heading="DTColumnDefBuilder">
2222
<article ng-include="'demo/api/apiColumnDefBuilder.html'"></article>
2323
</tab>
24+
<tab heading="DTInstances">
25+
<article ng-include="'demo/api/apiDTInstances.html'"></article>
26+
</tab>
2427
</tabset>
2528
</section>
2629

‎demo/api/apiDTInstances.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<h3><code>DTInstances</code></h3>
2+
<p>
3+
A DataTable directive instance is created each time a DataTable is rendered. You can fetch it by calling the service
4+
<code>DTInstances.getLast()</code> to fetch the last instance or <code>DTInstance.getList()</code> to fetch the entire list of instances.
5+
</p>
6+
<table datatable dt-options="api.dtOptions" class="row-border hover">
7+
<thead>
8+
<tr>
9+
<th>Helper/Wrapper</th>
10+
<th>API</th>
11+
<th>Description</th>
12+
</tr>
13+
</thead>
14+
<tbody>
15+
<tr>
16+
<td><code>DTInstances</code></td>
17+
<td><code>getLast()</code></td>
18+
<td>
19+
Returns a promise that fetches the last datatable instance that was rendered.
20+
<div hljs language="js">
21+
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
22+
function MyCtrl(DTInstances) {
23+
DTInstances.getLast().then(function(lastDTInstance) {
24+
// lastDTInstance === {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable}
25+
26+
// loadedDT.DataTable is the DataTable API instance
27+
// loadedDT.dataTable is the jQuery Object
28+
// See http://datatables.net/manual/api#Accessing-the-API
29+
});
30+
}
31+
</div>
32+
</td>
33+
</tr>
34+
<tr>
35+
<td><code>DTInstances</code></td>
36+
<td><code>getList()</code></td>
37+
<td>
38+
Returns a promise that fetches all the datatables instances that were rendered.
39+
<div hljs language="js">
40+
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
41+
function MyCtrl(DTInstances) {
42+
DTInstances.getList().then(function(dtInstances) {
43+
/*
44+
* dtInstances === {
45+
* "foobar": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable},
46+
* "foobar2": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable}
47+
* }
48+
*/
49+
});
50+
}
51+
</div>
52+
</td>
53+
</tr>
54+
</tbody>
55+
</table>

‎demo/partials/gettingStarted.html

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<article class="main-content">
1+
<article class="main-content gettingstarted">
22
<header class="article-header">
33
<h1><i class="fa fa-gear"></i>&nbsp;Getting started</h1>
44
</header>
@@ -66,25 +66,39 @@ <h3>Additional Notes</h3>
6666
</li>
6767
<li>
6868
<p>
69-
Each time a datatable is rendered, a message is sent to the parent scopes with the id of the table and the DataTable itself.
70-
<br />
71-
For instance, for the given dataTable:
69+
A DataTable directive instance is created each time a DataTable is rendered. You can fetch it by calling the service
70+
<code>DTInstances.getLast()</code> to fetch the last instance or <code>DTInstance.getList()</code> to fetch the entire list of instances.
71+
</p>
72+
<p>
73+
For instance, for the given dataTables:
7274
</p>
7375
<div hljs language="html">
7476
<table id="foobar" datatable dt-options="dtOptions" dt-columns="dtColumns"></table>
77+
<table id="foobar2" datatable dt-options="dtOptions" dt-columns="dtColumns"></table>
7578
</div>
7679
<p>
77-
You can catch the event like this in your parent directive or controller:
80+
You can fetch the instances like this:
7881
</p>
7982
<div hljs language="js">
80-
$scope.$on('event:dataTableLoaded', function(event, loadedDT) {
81-
// loadedDT === {"id": "foobar", "DataTable": oTable, "dataTable": $oTable}
83+
DTInstances.getLast().then(function(lastDTInstance) {
84+
// lastDTInstance === {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable}
8285

8386
// loadedDT.DataTable is the DataTable API instance
8487
// loadedDT.dataTable is the jQuery Object
8588
// See http://datatables.net/manual/api#Accessing-the-API
8689
});
90+
DTInstances.getList().then(function(dtInstances) {
91+
/*
92+
* dtInstances === {
93+
* "foobar": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable},
94+
* "foobar2": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable}
95+
* }
96+
*/
97+
});
8798
</div>
99+
<p>
100+
For more information, please check the <a href="http://l-lin.github.io/angular-datatables/#/api">documentation</a>.
101+
</p>
88102
</li>
89103
<li>
90104
<p>

0 commit comments

Comments
 (0)