Skip to content

Commit 2a9b6c9

Browse files
l-linl-lin
committed
Add dt prefix + Add doc l-lin#144 
1 parent 0d3ccb8 commit 2a9b6c9

File tree

6 files changed

+97
-14
lines changed

6 files changed

+97
-14
lines changed

‎demo/advanced/disableDeepWatchers.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;Disabling deep watchers</h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
The <code>angular-datatables</code> uses deep search for changes on every <code>$digest</code> cycle.
8+
Meaning every time any Angular event happens (ng-clicks, etc.), the entire array, each of it's children, it's children's children, and so forth gets compared to a cached copy.
9+
</p>
10+
<p>
11+
There is an attribute to add so that if the directive has a truthy value for <code>dt-disable-deep-watchers</code> at compile time then it will use <code>$watchCollection(...)</code> instead.
12+
This would allow users to prevent big datasets from thrashing Angular's <code>$digest</code> cycle at their own discretion
13+
</p>
14+
</section>
15+
<section class="showcase" ng-controller="withAjaxCtrl">
16+
<tabset>
17+
<tab heading="Preview">
18+
<article class="preview">
19+
<div>
20+
<table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-disable-deep-watchers="true" class="row-border hover"></table>
21+
</div>
22+
</article>
23+
</tab>
24+
<tab heading="HTML">
25+
<div hljs>
26+
<div ng-controller="withAjaxCtrl">
27+
<table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-disable-deep-watchers="true" class="row-border hover"></table>
28+
</div>
29+
</div>
30+
</tab>
31+
<tab heading="JS">
32+
<div hljs language="js">
33+
angular.module('datatablesSampleApp', ['datatables']).controller('withAjaxCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
34+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
35+
.withPaginationType('full_numbers');
36+
$scope.dtColumns = [
37+
DTColumnBuilder.newColumn('id').withTitle('ID'),
38+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
39+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
40+
];
41+
});
42+
</div>
43+
</tab>
44+
<tab heading="Example data">
45+
<p class="example-data">
46+
<a target="_blank" href="/angular-datatables/data.json" tooltip="data.json">data.json&nbsp;<i class="fa fa-external-link"></i></a>
47+
</p>
48+
<div hljs language="json">
49+
[{
50+
"id": 860,
51+
"firstName": "Superman",
52+
"lastName": "Yoda"
53+
}, {
54+
"id": 870,
55+
"firstName": "Foo",
56+
"lastName": "Whateveryournameis"
57+
}, {
58+
"id": 590,
59+
"firstName": "Toto",
60+
"lastName": "Titi"
61+
}, {
62+
"id": 803,
63+
"firstName": "Luke",
64+
"lastName": "Kyle"
65+
},
66+
...
67+
]
68+
</div>
69+
</tab>
70+
</tabset>
71+
</section>
72+
</article>

‎demo/advanced/disableDeepWatchers.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
'use strict';
2+
angular.module('datatablesSampleApp').controller('withAjaxCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
3+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
4+
.withPaginationType('full_numbers');
5+
$scope.dtColumns = [
6+
DTColumnBuilder.newColumn('id').withTitle('ID'),
7+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
8+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
9+
];
10+
});

‎demo/usages.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ angular.module('datatablesSampleApp.usages', ['ngResource'])
2828
label: 'Data reload with Ajax'
2929
}, {
3030
name: 'dataReloadWithPromise',
31-
label: 'Data reload with promise',
31+
label: 'Data reload with promise'
3232
}, {
3333
name: 'serverSideProcessing',
34-
label: 'Server side processing',
34+
label: 'Server side processing'
3535
}, {
3636
name: 'angularWayDataChange',
3737
label: 'Change data with the Angular way'
@@ -47,6 +47,9 @@ angular.module('datatablesSampleApp.usages', ['ngResource'])
4747
}, {
4848
name: 'loadOptionsWithPromise',
4949
label: 'Load DT options with promise'
50+
}, {
51+
name: 'disableDeepWatchers',
52+
label: 'Disable deep watchers'
5053
}],
5154
withPlugins: [{
5255
name: 'withColReorder',

‎dist/angular-datatables.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -380,21 +380,20 @@
380380
return function postLink($scope, $elem, iAttrs, ctrl) {
381381
function handleChanges(newVal, oldVal) {
382382
if (newVal !== oldVal) {
383-
var newDTOptions = newVal[0], oldDTOptions = oldVal[0];
384383
// Do not rerender if we want to reload. There are already
385384
// some watchers in the renderers.
386-
if (!newDTOptions.reload || newDTOptions.sAjaxSource !== oldDTOptions.sAjaxSource) {
385+
if (!newVal.reload || newVal.sAjaxSource !== oldVal.sAjaxSource) {
387386
ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
388387
} else {
389388
// The reload attribute is set to false here in order
390389
// to recall this watcher again
391-
newDTOptions.reload = false;
390+
newVal.reload = false;
392391
}
393392
}
394393
}
395-
// Options can hold heavy data, and other deep/large objects.
394+
// Options can hold heavy data, and other deep/large objects.
396395
// watchcollection can improve this by only watching shallowly
397-
var watchFunction = iAttrs.disableDeepWatchers ? '$watchCollection' : '$watch';
396+
var watchFunction = iAttrs.dtDisableDeepWatchers ? '$watchCollection' : '$watch';
398397
angular.forEach([
399398
'dtColumns',
400399
'dtColumnDefs',

0 commit comments

Comments
 (0)