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

Commit 636fdc6

Browse files
l-linl-lin
committed
Expose method to rerender entire directive #157 
1 parent 143150c commit 636fdc6

9 files changed

+472
-12
lines changed

‎demo/advanced/rerender.html

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;Re-render a table</h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
The <code>DTInstance</code> API has a <code>rerender()</code> method that will call the renderer to re-render the table again.
8+
</p>
9+
<p class="alert alert-danger">
10+
<i class="fa fa-warning"></i>&nbsp;This is not the same as <strong><a href="https://datatables.net/reference/api/draw()">DataTable's draw(); API</a></strong>.
11+
It will completely remove the table, then it will re-render the table, resending the request to the server if necessarily.
12+
</p>
13+
<div class="form-horizontal">
14+
<div class="form-group">
15+
<label class="col-sm-2 control-label">Choose a renderer:</label>
16+
<div class="col-sm-3">
17+
<select ng-model="showCaseToChoose" class="form-control">
18+
<option value="default">Default renderer</option>
19+
<option value="ajax">Ajax renderer</option>
20+
<option value="promise">Promise renderer</option>
21+
<option value="angular">Angular renderer</option>
22+
</select>
23+
</div>
24+
</div>
25+
</div>
26+
</section>
27+
<section class="showcase">
28+
<tabset ng-if="showCaseToChoose == 'default'">
29+
<tab heading="Preview">
30+
<article class="preview">
31+
<div ng-controller="RerenderDefaultRendererCtrl as showCase">
32+
<p>
33+
<button class="btn btn-primary" ng-click="showCase.dtInstance.rerender()">Rerender</button>
34+
</p>
35+
<table datatable dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
36+
<thead>
37+
<tr>
38+
<th>ID</th>
39+
<th>First name</th>
40+
<th>Last name</th>
41+
</tr>
42+
</thead>
43+
<tbody>
44+
<tr>
45+
<td>1</td>
46+
<td>Foo</td>
47+
<td>Bar</td>
48+
</tr>
49+
<tr>
50+
<td>123</td>
51+
<td>Someone</td>
52+
<td>Youknow</td>
53+
</tr>
54+
<tr>
55+
<td>987</td>
56+
<td>Iamout</td>
57+
<td>Ofinspiration</td>
58+
</tr>
59+
</tbody>
60+
</table>
61+
</div>
62+
</article>
63+
</tab>
64+
<tab heading="HTML">
65+
<div hljs>
66+
<div ng-controller="RerenderDefaultRendererCtrl as showCase">
67+
<p>
68+
<button class="btn btn-primary" ng-click="showCase.dtInstance.rerender()">Rerender</button>
69+
</p>
70+
<table datatable dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
71+
<thead>
72+
<tr>
73+
<th>ID</th>
74+
<th>First name</th>
75+
<th>Last name</th>
76+
</tr>
77+
</thead>
78+
<tbody>
79+
<tr>
80+
<td>1</td>
81+
<td>Foo</td>
82+
<td>Bar</td>
83+
</tr>
84+
<tr>
85+
<td>123</td>
86+
<td>Someone</td>
87+
<td>Youknow</td>
88+
</tr>
89+
<tr>
90+
<td>987</td>
91+
<td>Iamout</td>
92+
<td>Ofinspiration</td>
93+
</tr>
94+
</tbody>
95+
</table>
96+
</div>
97+
</div>
98+
</tab>
99+
<tab heading="JS">
100+
<div hljs language="js">
101+
angular.module('datatablesSampleApp', ['datatables']).controller('RerenderDefaultRendererCtrl', RerenderDefaultRendererCtrl);
102+
103+
function RerenderDefaultRendererCtrl(DTOptionsBuilder, DTColumnDefBuilder, DTInstances) {
104+
var vm = this;
105+
vm.dtOptions = DTOptionsBuilder.newOptions();
106+
vm.dtColumnDefs = [
107+
DTColumnDefBuilder.newColumnDef(0),
108+
DTColumnDefBuilder.newColumnDef(1).notVisible(),
109+
DTColumnDefBuilder.newColumnDef(2).notSortable()
110+
];
111+
112+
DTInstances.getLast().then(function (dtInstance) {
113+
vm.dtInstance = dtInstance;
114+
});
115+
}
116+
</div>
117+
</tab>
118+
</tabset>
119+
120+
<tabset ng-if="showCaseToChoose == 'ajax'">
121+
<tab heading="Preview">
122+
<article class="preview">
123+
<div ng-controller="RerenderAjaxRendererCtrl as showCase">
124+
<p>
125+
<button class="btn btn-primary" ng-click="showCase.dtInstance.rerender()">Rerender</button>
126+
</p>
127+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
128+
</div>
129+
</article>
130+
</tab>
131+
<tab heading="HTML">
132+
<div hljs>
133+
<div ng-controller="RerenderAjaxRendererCtrl as showCase">
134+
<p>
135+
<button class="btn btn-primary" ng-click="showCase.dtInstance.rerender()">Rerender</button>
136+
</p>
137+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
138+
</div>
139+
</div>
140+
</tab>
141+
<tab heading="JS">
142+
<div hljs language="js">
143+
angular.module('datatablesSampleApp', ['datatables']).controller('RerenderAjaxRendererCtrl', RerenderAjaxRendererCtrl);
144+
145+
function RerenderAjaxRendererCtrl(DTOptionsBuilder, DTColumnBuilder, DTInstances) {
146+
var vm = this;
147+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
148+
vm.dtColumns = [
149+
DTColumnBuilder.newColumn('id').withTitle('ID'),
150+
DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(),
151+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable()
152+
];
153+
154+
DTInstances.getLast().then(function (dtInstance) {
155+
vm.dtInstance = dtInstance;
156+
});
157+
}
158+
</div>
159+
</tab>
160+
</tabset>
161+
162+
<tabset ng-if="showCaseToChoose == 'promise'">
163+
<tab heading="Preview">
164+
<article class="preview">
165+
<div ng-controller="RerenderPromiseRendererCtrl as showCase">
166+
<p>
167+
<button class="btn btn-primary" ng-click="showCase.dtInstance.rerender()">Rerender</button>
168+
</p>
169+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
170+
</div>
171+
</article>
172+
</tab>
173+
<tab heading="HTML">
174+
<div hljs>
175+
<div ng-controller="RerenderPromiseRendererCtrl as showCase">
176+
<p>
177+
<button class="btn btn-primary" ng-click="showCase.dtInstance.rerender()">Rerender</button>
178+
</p>
179+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
180+
</div>
181+
</div>
182+
</tab>
183+
<tab heading="JS">
184+
<div hljs language="js">
185+
angular.module('datatablesSampleApp', ['datatables']).controller('RerenderPromiseRendererCtrl', RerenderPromiseRendererCtrl);
186+
187+
function RerenderPromiseRendererCtrl($resource, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
188+
var vm = this;
189+
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
190+
return $resource('data.json').query().$promise;
191+
});
192+
vm.dtColumns = [
193+
DTColumnBuilder.newColumn('id').withTitle('ID'),
194+
DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(),
195+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable()
196+
];
197+
198+
DTInstances.getLast().then(function (dtInstance) {
199+
vm.dtInstance = dtInstance;
200+
});
201+
}
202+
</div>
203+
</tab>
204+
</tabset>
205+
206+
<tabset ng-if="showCaseToChoose == 'angular'">
207+
<tab heading="Preview">
208+
<article class="preview">
209+
<div ng-controller="RerenderNGRendererCtrl as showCase">
210+
<p>
211+
<button class="btn btn-primary" ng-click="showCase.dtInstance.rerender()">Rerender</button>
212+
</p>
213+
<table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
214+
<thead>
215+
<tr>
216+
<th>ID</th>
217+
<th>FirstName</th>
218+
<th>LastName</th>
219+
</tr>
220+
</thead>
221+
<tbody>
222+
<tr ng-repeat="person in showCase.persons">
223+
<td>{{ person.id }}</td>
224+
<td>{{ person.firstName }}</td>
225+
<td>{{ person.lastName }}</td>
226+
</tr>
227+
</tbody>
228+
</table>
229+
</div>
230+
</article>
231+
</tab>
232+
<tab heading="HTML">
233+
<div hljs>
234+
<div ng-controller="RerenderNGRendererCtrl as showCase">
235+
<p>
236+
<button class="btn btn-primary" ng-click="showCase.dtInstance.rerender()">Rerender</button>
237+
</p>
238+
<table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
239+
<thead>
240+
<tr>
241+
<th>ID</th>
242+
<th>FirstName</th>
243+
<th>LastName</th>
244+
</tr>
245+
</thead>
246+
<tbody>
247+
<tr ng-repeat="person in showCase.persons">
248+
<td>{{ person.id }}</td>
249+
<td>{{ person.firstName }}</td>
250+
<td>{{ person.lastName }}</td>
251+
</tr>
252+
</tbody>
253+
</table>
254+
</div>
255+
</div>
256+
</tab>
257+
<tab heading="JS">
258+
<div hljs language="js">
259+
angular.module('datatablesSampleApp', ['datatables']).controller('RerenderAjaxRendererCtrl', RerenderAjaxRendererCtrl);
260+
261+
function RerenderNGRendererCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder, DTInstances) {
262+
var vm = this;
263+
vm.persons = [];
264+
vm.dtOptions = DTOptionsBuilder.newOptions();
265+
vm.dtColumnDefs = [
266+
DTColumnDefBuilder.newColumnDef(0),
267+
DTColumnDefBuilder.newColumnDef(1).notVisible(),
268+
DTColumnDefBuilder.newColumnDef(2).notSortable()
269+
];
270+
271+
$resource('data.json').query().$promise.then(function(persons) {
272+
vm.persons = persons;
273+
});
274+
275+
DTInstances.getLast().then(function (dtInstance) {
276+
vm.dtInstance = dtInstance;
277+
});
278+
}
279+
</div>
280+
</tab>
281+
</tabset>
282+
</section>
283+
</article>

‎demo/advanced/rerender.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
'use strict';
2+
angular.module('datatablesSampleApp')
3+
.controller('RerenderDefaultRendererCtrl', RerenderDefaultRendererCtrl)
4+
.controller('RerenderAjaxRendererCtrl', RerenderAjaxRendererCtrl)
5+
.controller('RerenderPromiseRendererCtrl', RerenderPromiseRendererCtrl)
6+
.controller('RerenderNGRendererCtrl', RerenderNGRendererCtrl);
7+
8+
function RerenderDefaultRendererCtrl(DTOptionsBuilder, DTColumnDefBuilder, DTInstances) {
9+
var vm = this;
10+
vm.dtOptions = DTOptionsBuilder.newOptions();
11+
vm.dtColumnDefs = [
12+
DTColumnDefBuilder.newColumnDef(0),
13+
DTColumnDefBuilder.newColumnDef(1).notVisible(),
14+
DTColumnDefBuilder.newColumnDef(2).notSortable()
15+
];
16+
17+
DTInstances.getLast().then(function (dtInstance) {
18+
vm.dtInstance = dtInstance;
19+
});
20+
}
21+
22+
function RerenderAjaxRendererCtrl(DTOptionsBuilder, DTColumnBuilder, DTInstances) {
23+
var vm = this;
24+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
25+
vm.dtColumns = [
26+
DTColumnBuilder.newColumn('id').withTitle('ID'),
27+
DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(),
28+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable()
29+
];
30+
31+
DTInstances.getLast().then(function (dtInstance) {
32+
vm.dtInstance = dtInstance;
33+
});
34+
}
35+
36+
function RerenderPromiseRendererCtrl($resource, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
37+
var vm = this;
38+
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
39+
return $resource('data.json').query().$promise;
40+
});
41+
vm.dtColumns = [
42+
DTColumnBuilder.newColumn('id').withTitle('ID'),
43+
DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(),
44+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable()
45+
];
46+
47+
DTInstances.getLast().then(function (dtInstance) {
48+
vm.dtInstance = dtInstance;
49+
});
50+
}
51+
52+
function RerenderNGRendererCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder, DTInstances) {
53+
var vm = this;
54+
vm.persons = [];
55+
vm.dtOptions = DTOptionsBuilder.newOptions();
56+
vm.dtColumnDefs = [
57+
DTColumnDefBuilder.newColumnDef(0),
58+
DTColumnDefBuilder.newColumnDef(1).notVisible(),
59+
DTColumnDefBuilder.newColumnDef(2).notSortable()
60+
];
61+
62+
$resource('data.json').query().$promise.then(function(persons) {
63+
vm.persons = persons;
64+
});
65+
66+
DTInstances.getLast().then(function (dtInstance) {
67+
vm.dtInstance = dtInstance;
68+
});
69+
}

0 commit comments

Comments
 (0)