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

Commit da3de19

Browse files
l-linl-lin
committed
DTOptions fromFnPromise, can change options #139 
1 parent f768a9f commit da3de19

21 files changed

+980
-498
lines changed

‎demo/advanced/bindAngularDirective.html

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,62 +11,67 @@ <h1><i class="fa fa-play"></i>&nbsp;Binding Angular directive to the DataTable</
1111
<tabset>
1212
<tab heading="Preview">
1313
<article class="preview">
14-
<div ng-controller="BindAngularDirectiveCtrl">
15-
<p class="text-danger"><strong>{{ message }}</strong></p>
14+
<div ng-controller="BindAngularDirectiveCtrl as showCase">
15+
<p class="text-danger"><strong>{{ showCase.message }}</strong></p>
1616
<br />
17-
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
17+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
1818
</div>
1919
</article>
2020
</tab>
2121
<tab heading="HTML">
2222
<div hljs>
23-
<div ng-controller="BindAngularDirectiveCtrl">
24-
<p class="text-danger"><strong>{{ message }}</strong></p>
23+
<div ng-controller="BindAngularDirectiveCtrl as showCase">
24+
<p class="text-danger"><strong>{{ showCase.message }}</strong></p>
2525
<br />
26-
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
26+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
2727
</div>
2828
</div>
2929
</tab>
3030
<tab heading="JS">
3131
<div hljs language="js">
3232
angular.module('datatablesSampleApp', ['datatables']).controller('BindAngularDirectiveCtrl', BindAngularDirectiveCtrl);
3333

34-
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
35-
$scope.message = '';
36-
$scope.edit = edit;
37-
$scope.delete = deleteRow;
38-
$scope.dtOptions = DTOptionsBuilder.fromSource('data1.json')
34+
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
35+
var vm = this;
36+
vm.message = '';
37+
vm.edit = edit;
38+
vm.delete = deleteRow;
39+
vm.dtOptions = DTOptionsBuilder.fromSource('data1.json')
3940
.withPaginationType('full_numbers')
4041
.withOption('createdRow', createdRow);
41-
$scope.dtColumns = [
42+
vm.dtColumns = [
4243
DTColumnBuilder.newColumn('id').withTitle('ID'),
4344
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
4445
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
4546
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
4647
.renderWith(actionsHtml)
4748
];
4849

50+
DTInstances.getLast().then(function (dtInstance) {
51+
vm.dtInstance = dtInstance;
52+
});
53+
4954
function edit(id) {
50-
$scope.message = 'You are trying to edit the row with ID: ' + id;
55+
vm.message = 'You are trying to edit the row with ID: ' + id;
5156
// Edit some data and call server to make changes...
5257
// Then reload the data so that DT is refreshed
53-
$scope.dtOptions.reloadData();
58+
vm.dtInstance.reloadData();
5459
}
5560
function deleteRow(id) {
56-
$scope.message = 'You are trying to remove the row with ID: ' + id;
61+
vm.message = 'You are trying to remove the row with ID: ' + id;
5762
// Delete some data and call server to make changes...
5863
// Then reload the data so that DT is refreshed
59-
$scope.dtOptions.reloadData();
64+
vm.dtInstance.reloadData();
6065
}
6166
function createdRow(row, data, dataIndex) {
6267
// Recompiling so we can bind Angular directive to the DT
6368
$compile(angular.element(row).contents())($scope);
6469
}
6570
function actionsHtml(data, type, full, meta) {
66-
return '<button class="btn btn-warning" ng-click="edit(' + data.id + ')">' +
71+
return '<button class="btn btn-warning" ng-click="showCase.edit(' + data.id + ')">' +
6772
' <i class="fa fa-edit"></i>' +
6873
'</button>&nbsp;' +
69-
'<button class="btn btn-danger" ng-click="delete(' + data.id + ')">' +
74+
'<button class="btn btn-danger" ng-click="showCase.delete(' + data.id + ')">' +
7075
' <i class="fa fa-trash-o"></i>' +
7176
'</button>';
7277
}

‎demo/advanced/bindAngularDirective.js

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

4-
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
5-
$scope.message = '';
6-
$scope.edit = edit;
7-
$scope.delete = deleteRow;
8-
$scope.dtOptions = DTOptionsBuilder.fromSource('data1.json')
4+
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
5+
var vm = this;
6+
vm.message = '';
7+
vm.edit = edit;
8+
vm.delete = deleteRow;
9+
vm.dtOptions = DTOptionsBuilder.fromSource('data1.json')
910
.withPaginationType('full_numbers')
1011
.withOption('createdRow', createdRow);
11-
$scope.dtColumns = [
12+
vm.dtColumns = [
1213
DTColumnBuilder.newColumn('id').withTitle('ID'),
1314
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
1415
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
1516
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
1617
.renderWith(actionsHtml)
1718
];
1819

20+
DTInstances.getLast().then(function (dtInstance) {
21+
vm.dtInstance = dtInstance;
22+
});
23+
1924
function edit(id) {
20-
$scope.message = 'You are trying to edit the row with ID: ' + id;
25+
vm.message = 'You are trying to edit the row with ID: ' + id;
2126
// Edit some data and call server to make changes...
2227
// Then reload the data so that DT is refreshed
23-
$scope.dtOptions.reloadData();
28+
vm.dtInstance.reloadData();
2429
}
2530
function deleteRow(id) {
26-
$scope.message = 'You are trying to remove the row with ID: ' + id;
31+
vm.message = 'You are trying to remove the row with ID: ' + id;
2732
// Delete some data and call server to make changes...
2833
// Then reload the data so that DT is refreshed
29-
$scope.dtOptions.reloadData();
34+
vm.dtInstance.reloadData();
3035
}
3136
function createdRow(row, data, dataIndex) {
3237
// Recompiling so we can bind Angular directive to the DT
3338
$compile(angular.element(row).contents())($scope);
3439
}
3540
function actionsHtml(data, type, full, meta) {
36-
return '<button class="btn btn-warning" ng-click="edit(' + data.id + ')">' +
41+
return '<button class="btn btn-warning" ng-click="showCase.edit(' + data.id + ')">' +
3742
' <i class="fa fa-edit"></i>' +
3843
'</button>&nbsp;' +
39-
'<button class="btn btn-danger" ng-click="delete(' + data.id + ')">' +
44+
'<button class="btn btn-danger" ng-click="showCase.delete(' + data.id + ')">' +
4045
' <i class="fa fa-trash-o"></i>' +
4146
'</button>';
4247
}

0 commit comments

Comments
 (0)