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

Commit 492d278

Browse files
l-linl-lin
committed
Add the possibility to provide an object or a callback function to fetch
the DT instance #307
1 parent 993dfd7 commit 492d278

24 files changed

+270
-156
lines changed

‎CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ npm install
3737

3838

3939
If you need to see the result of your feature/bug fix on the demo, you can launch the node server by
40-
executing the following command and access to [http://localhost:3000/angular-datatables](http://localhost:3000/angular-datatables)
40+
executing the following command and access to [http://localhost:3000](http://localhost:3000)
4141
```
4242
grunt serve
4343
```

‎README.md

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,37 @@ Additional notes
7878
----------------
7979

8080
* [RequireJS](http://requirejs.org/) is not supported.
81-
* A DataTable directive instance is created each time a DataTable is rendered. You can fetch it by calling the service
82-
`DTInstances.getLast()` to fetch the last instance or `DTInstance.getList()` to fetch the entire list of instances.
81+
* A DataTable directive instance is created each time a DataTable is rendered.
82+
* You can use the directive `dt-instance` where you provide a variable that will be populated with the DataTable instance
83+
once it's rendered:
84+
85+
```html
86+
<table id="foobar" datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance"></table>
87+
```
88+
89+
The `dtInstance` variable will be populated with the following value:
90+
91+
```json
92+
{
93+
"id": "foobar",
94+
"DataTable": oTable,
95+
"dataTable": $oTable,
96+
"reloadData": function(callback, resetPaging),
97+
"changeData": function(newData),
98+
"rerender": function()
99+
}
100+
```
101+
102+
> DataTable is the DataTable API instance
103+
> dataTable is the jQuery Object
104+
> See http://datatables.net/manual/api#Accessing-the-API
105+
106+
For more information, please check the [documentation](http://l-lin.github.io/angular-datatables/#/dtInstances).
107+
108+
* You can also fetch it by calling the service `DTInstances.getLast()` to fetch the last instance or `DTInstance.getList()`
109+
to fetch the entire list of instances.
110+
111+
> These APIs are deprecated. They will be removed in the v0.5.0+. Use the above approach instead.
83112
84113
For instance, for the given dataTables:
85114

‎demo/advanced/bindAngularDirective.html

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Binding Angular directive to the DataTable</
1414
<div ng-controller="BindAngularDirectiveCtrl as showCase">
1515
<p class="text-danger"><strong>{{ showCase.message }}</strong></p>
1616
<br />
17-
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
17+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
1818
</div>
1919
</article>
2020
</tab>
@@ -23,7 +23,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Binding Angular directive to the DataTable</
2323
<div ng-controller="BindAngularDirectiveCtrl as showCase">
2424
<p class="text-danger"><strong>{{ showCase.message }}</strong></p>
2525
<br />
26-
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
26+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
2727
</div>
2828
</div>
2929
</tab>
@@ -32,11 +32,12 @@ <h1><i class="fa fa-play"></i>&nbsp;Binding Angular directive to the DataTable</
3232
angular.module('showcase.bindAngularDirective', ['datatables'])
3333
.controller('BindAngularDirectiveCtrl', BindAngularDirectiveCtrl);
3434

35-
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
35+
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
3636
var vm = this;
3737
vm.message = '';
3838
vm.edit = edit;
3939
vm.delete = deleteRow;
40+
vm.dtInstance = {};
4041
vm.dtOptions = DTOptionsBuilder.fromSource('data1.json')
4142
.withPaginationType('full_numbers')
4243
.withOption('createdRow', createdRow);
@@ -48,10 +49,6 @@ <h1><i class="fa fa-play"></i>&nbsp;Binding Angular directive to the DataTable</
4849
.renderWith(actionsHtml)
4950
];
5051

51-
DTInstances.getLast().then(function (dtInstance) {
52-
vm.dtInstance = dtInstance;
53-
});
54-
5552
function edit(id) {
5653
vm.message = 'You are trying to edit the row with ID: ' + id;
5754
// Edit some data and call server to make changes...

‎demo/advanced/bindAngularDirective.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
angular.module('showcase.bindAngularDirective', ['datatables'])
33
.controller('BindAngularDirectiveCtrl', BindAngularDirectiveCtrl);
44

5-
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
5+
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
66
var vm = this;
77
vm.message = '';
88
vm.edit = edit;
99
vm.delete = deleteRow;
10+
vm.dtInstance = {};
1011
vm.dtOptions = DTOptionsBuilder.fromSource('data1.json')
1112
.withPaginationType('full_numbers')
1213
.withOption('createdRow', createdRow);
@@ -18,10 +19,6 @@ function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBu
1819
.renderWith(actionsHtml)
1920
];
2021

21-
DTInstances.getLast().then(function (dtInstance) {
22-
vm.dtInstance = dtInstance;
23-
});
24-
2522
function edit(id) {
2623
vm.message = 'You are trying to edit the row with ID: ' + id;
2724
// Edit some data and call server to make changes...

‎demo/advanced/dataReloadWithAjax.html

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from an Ajax sour
2828
<i class="fa fa-exchange"></i>&nbsp;Change data
2929
</button>
3030
</p>
31-
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
31+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
3232
</div>
3333
</article>
3434
</tab>
@@ -43,7 +43,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from an Ajax sour
4343
<i class="fa fa-exchange"></i>&nbsp;Change data
4444
</button>
4545
</p>
46-
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
46+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
4747
</div>
4848
</div>
4949
</tab>
@@ -52,7 +52,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from an Ajax sour
5252
angular.module('showcase.dataReload.withAjax', ['datatables'])
5353
.controller('DataReloadWithAjaxCtrl', DataReloadWithAjaxCtrl);
5454

55-
function DataReloadWithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder, DTInstances) {
55+
function DataReloadWithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
5656
var vm = this;
5757
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
5858
.withOption('stateSave', true)
@@ -64,10 +64,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from an Ajax sour
6464
];
6565
vm.newSource = 'data1.json';
6666
vm.reloadData = reloadData;
67-
68-
DTInstances.getLast().then(function(dtInstance) {
69-
vm.dtInstance = dtInstance;
70-
});
67+
vm.dtInstance = {};
7168

7269
function reloadData() {
7370
var resetPaging = false;

‎demo/advanced/dataReloadWithAjax.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
angular.module('showcase.dataReload.withAjax', ['datatables'])
33
.controller('DataReloadWithAjaxCtrl', DataReloadWithAjaxCtrl);
44

5-
function DataReloadWithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder, DTInstances) {
5+
function DataReloadWithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
66
var vm = this;
77
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
88
.withOption('stateSave', true)
@@ -14,10 +14,7 @@ function DataReloadWithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder, DTInstances)
1414
];
1515
vm.newSource = 'data1.json';
1616
vm.reloadData = reloadData;
17-
18-
DTInstances.getLast().then(function(dtInstance) {
19-
vm.dtInstance = dtInstance;
20-
});
17+
vm.dtInstance = {};
2118

2219
function reloadData() {
2320
var resetPaging = false;

‎demo/advanced/dataReloadWithPromise.html

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from a promise fu
3333
<i class="fa fa-exchange"></i>&nbsp;Change data
3434
</button>
3535
</p>
36-
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
36+
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
3737
</div>
3838
</article>
3939
</tab>
@@ -48,7 +48,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from a promise fu
4848
<i class="fa fa-exchange"></i>&nbsp;Change data
4949
</button>
5050
</p>
51-
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
51+
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="row-border hover"></table>
5252
</div>
5353
</div>
5454
</tab>
@@ -57,7 +57,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from a promise fu
5757
angular.module('showcase.dataReload.withPromise', ['datatables', 'ngResource'])
5858
.controller('DataReloadWithPromiseCtrl', DataReloadWithPromiseCtrl);
5959

60-
function DataReloadWithPromiseCtrl(DTOptionsBuilder, DTColumnBuilder, $resource, DTInstances) {
60+
function DataReloadWithPromiseCtrl(DTOptionsBuilder, DTColumnBuilder, $resource) {
6161
var vm = this;
6262
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
6363
return $resource('data.json').query().$promise;
@@ -69,10 +69,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Load/Reload the table data from a promise fu
6969
];
7070
vm.newPromise = newPromise;
7171
vm.reloadData = reloadData;
72-
73-
DTInstances.getLast().then(function (dtInstance) {
74-
vm.dtInstance = dtInstance;
75-
});
72+
vm.dtInstance = {};
7673

7774
function newPromise() {
7875
return $resource('data1.json').query().$promise;

‎demo/advanced/dataReloadWithPromise.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
angular.module('showcase.dataReload.withPromise', ['datatables', 'ngResource'])
33
.controller('DataReloadWithPromiseCtrl', DataReloadWithPromiseCtrl);
44

5-
function DataReloadWithPromiseCtrl(DTOptionsBuilder, DTColumnBuilder, $resource, DTInstances) {
5+
function DataReloadWithPromiseCtrl(DTOptionsBuilder, DTColumnBuilder, $resource) {
66
var vm = this;
77
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
88
return $resource('data.json').query().$promise;
@@ -14,10 +14,7 @@ function DataReloadWithPromiseCtrl(DTOptionsBuilder, DTColumnBuilder, $resource,
1414
];
1515
vm.newPromise = newPromise;
1616
vm.reloadData = reloadData;
17-
18-
DTInstances.getLast().then(function (dtInstance) {
19-
vm.dtInstance = dtInstance;
20-
});
17+
vm.dtInstance = {};
2118

2219
function newPromise() {
2320
return $resource('data1.json').query().$promise;

‎demo/advanced/dtInstances.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;Getting the DataTable instances</h1>
4+
</header>
5+
<section class="article-content gettingstarted">
6+
<p>
7+
You can use the directive <code>dt-instance</code> where you provide a variable that will be
8+
populated with the DataTable instance once it's rendered:
9+
</p>
10+
<div hljs language="html">
11+
<table id="foobar" datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance"></table>
12+
</div>
13+
<p>
14+
Or you can provide a callback <code>function(dtInstance)</code> instead in the <code>dt-instance</code> directive:
15+
</p>
16+
<div hljs language="html">
17+
<table id="foobar" datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstanceCallback"></table>
18+
</div>
19+
<p>
20+
The <code>dtInstance</code> variable will be populated with the following value:
21+
</p>
22+
<div hljs language="json">
23+
{
24+
"id": "foobar",
25+
"DataTable": oTable,
26+
"dataTable": $oTable,
27+
"reloadData": function(callback, resetPaging),
28+
"changeData": function(newData),
29+
"rerender": function()
30+
}
31+
</div>
32+
<ul>
33+
<li><code>id</code> is the ID of the DataTable</li>
34+
<li><code>DataTable</code> is the DataTable API instance</li>
35+
<li><code>dataTable</code> is the jQuery Object</li>
36+
</ul>
37+
</section>
38+
<section class="showcase">
39+
<tabset>
40+
<tab heading="Preview">
41+
<article class="preview">
42+
<div ng-controller="DTInstancesCtrl as showCase">
43+
<p class="text-danger">
44+
The first DataTable instance ID is: <strong>{{ showCase.dtInstance1.id }}</strong>
45+
</p>
46+
<table datatable dt-options="showCase.dtOptions1" dt-columns="showCase.dtColumns1" dt-instance="showCase.dtInstance1" class="row-border hover"></table>
47+
<p class="text-danger">
48+
The second DataTable instance ID is: <strong>{{ showCase.dtInstance2.id }}</strong>
49+
</p>
50+
<table datatable dt-options="showCase.dtOptions2" dt-columns="showCase.dtColumns2" dt-instance="showCase.dtInstanceCallback" class="row-border hover"></table>
51+
</div>
52+
</article>
53+
</tab>
54+
<tab heading="HTML">
55+
<div hljs>
56+
<div ng-controller="DTInstancesCtrl as showCase">
57+
<p class="text-danger">
58+
The first DataTable instance ID is: <strong>{{ showCase.dtInstance1.id }}</strong>
59+
</p>
60+
<table datatable dt-options="showCase.dtOptions1" dt-columns="showCase.dtColumns1" dt-instance="showCase.dtInstance1" class="row-border hover"></table>
61+
<p class="text-danger">
62+
The second DataTable instance ID is: <strong>{{ showCase.dtInstance2.id }}</strong>
63+
</p>
64+
<table datatable dt-options="showCase.dtOptions2" dt-columns="showCase.dtColumns2" dt-instance="showCase.dtInstanceCallback" class="row-border hover"></table>
65+
</div>
66+
</div>
67+
</tab>
68+
<tab heading="JS">
69+
<div hljs language="js">
70+
angular.module('showcase.dtInstances', ['datatables']).controller('DTInstancesCtrl', DTInstancesCtrl);
71+
72+
function DTInstancesCtrl(DTOptionsBuilder, DTColumnBuilder) {
73+
var vm = this;
74+
vm.dtInstances = [];
75+
vm.dtOptions1 = DTOptionsBuilder.fromSource('data.json')
76+
.withDisplayLength(2)
77+
.withPaginationType('full_numbers');
78+
vm.dtColumns1 = [
79+
DTColumnBuilder.newColumn('id').withTitle('ID'),
80+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
81+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
82+
];
83+
vm.dtInstance1 = {};
84+
85+
vm.dtOptions2 = DTOptionsBuilder.fromSource('data1.json');
86+
vm.dtColumns2 = [
87+
DTColumnBuilder.newColumn('id').withTitle('ID'),
88+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
89+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
90+
];
91+
vm.dtInstance2 = {};
92+
vm.dtInstanceCallback = dtInstanceCallback;
93+
94+
function dtInstanceCallback(dtInstance) {
95+
vm.dtInstance2 = dtInstance;
96+
}
97+
}
98+
</div>
99+
</tab>
100+
</tabset>
101+
</section>
102+
</article>

‎demo/advanced/dtInstances.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use strict';
2+
angular.module('showcase.dtInstances', ['datatables']).controller('DTInstancesCtrl', DTInstancesCtrl);
3+
4+
function DTInstancesCtrl(DTOptionsBuilder, DTColumnBuilder) {
5+
var vm = this;
6+
vm.dtInstances = [];
7+
vm.dtOptions1 = DTOptionsBuilder.fromSource('data.json')
8+
.withDisplayLength(2)
9+
.withPaginationType('full_numbers');
10+
vm.dtColumns1 = [
11+
DTColumnBuilder.newColumn('id').withTitle('ID'),
12+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
13+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
14+
];
15+
vm.dtInstance1 = {};
16+
17+
vm.dtOptions2 = DTOptionsBuilder.fromSource('data1.json');
18+
vm.dtColumns2 = [
19+
DTColumnBuilder.newColumn('id').withTitle('ID'),
20+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
21+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
22+
];
23+
vm.dtInstance2 = {};
24+
vm.dtInstanceCallback = dtInstanceCallback;
25+
26+
function dtInstanceCallback(dtInstance) {
27+
vm.dtInstance2 = dtInstance;
28+
}
29+
}

0 commit comments

Comments
 (0)