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

Commit daf99e5

Browse files
l-linl-lin
committed
Add Select support #428 
1 parent 59df13e commit daf99e5

24 files changed

+1508
-75
lines changed

‎demo/api/apiOptionsBuilder.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -836,6 +836,24 @@ <h3><code>DTOptionsBuilder</code></h3>
836836
vm.dtOptions = DTOptionsBuilder.newOptions()
837837
.withButtons(['colvis']);
838838
}
839+
</div>
840+
</td>
841+
</tr>
842+
<tr>
843+
<td><code>DTOptions</code></td>
844+
<td><code>withSelect(selectOptions)</code></td>
845+
<td>
846+
<p>
847+
Add <a href="https://datatables.net/extensions/select/">Select</a> compatibility.
848+
</p>
849+
<div hljs language="js">
850+
angular.module('myModule', ['datatables', 'datatables.select'])
851+
.controller('MyCtrl', MyCtrl);
852+
function MyCtrl(DTOptionsBuilder) {
853+
var vm = this;
854+
vm.dtOptions = DTOptionsBuilder.newOptions()
855+
.withSelect(true);
856+
}
839857
</div>
840858
</td>
841859
</tr>

‎demo/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ angular.module('showcase', [
3232
'showcase.withFixedColumns',
3333
'showcase.withFixedHeader',
3434
'showcase.withButtons',
35+
'showcase.withSelect',
3536
'showcase.dtInstances',
3637

3738
'showcase.usages',

‎demo/usages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,9 @@ angular.module('showcase.usages', ['ngResource'])
105105
}, {
106106
name: 'withResponsive',
107107
label: 'With Responsive'
108+
}, {
109+
name: 'withSelect',
110+
label: 'With Select'
108111
}, {
109112
name: 'withScroller',
110113
label: 'With Scroller'

‎demo/withPlugins/withSelect.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>
4+
<i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatables.net/extensions/select/">Select</a>
5+
</h1>
6+
</header>
7+
<section class="article-content">
8+
<p>
9+
The <code>angular-datatables</code> also provides an API in order to make the plugin <code>Select</code> work with datatables.
10+
</p>
11+
<p>
12+
You need to add the file <code>angular-datatables.select.min.js</code> to your HTML file.
13+
</p>
14+
<p>
15+
You also need to add the dependency <code>datatables.select</code> to your Angular app.
16+
</p>
17+
<p>
18+
See the <a ui-sref="api">API</a> for the complete list of methods of the helper.
19+
</p>
20+
</section>
21+
<section class="showcase">
22+
<tabset>
23+
<tab heading="Preview">
24+
<article class="preview">
25+
<div ng-controller="WithSelectCtrl as showCase">
26+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
27+
</div>
28+
</article>
29+
</tab>
30+
<tab heading="HTML">
31+
<div hljs>
32+
<link rel="stylesheet" href="vendor/datatables-select/css/dataTables.select.css">
33+
<!-- ... -->
34+
<div ng-controller="WithSelectCtrl as showCase">
35+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
36+
</div>
37+
<!-- ... -->
38+
<script src="vendor/datatables-select/js/select.dataTables.js"></script>
39+
<script src="vendor/angular-datatables/dist/plugins/select/angular-datatables.select.min.js"></script>
40+
</div>
41+
</tab>
42+
<tab heading="JS">
43+
<div hljs language="js">
44+
angular.module('showcase.withSelect', ['datatables', 'datatables.select'])
45+
.controller('WithSelectCtrl', WithSelectCtrl);
46+
47+
function WithSelectCtrl(DTOptionsBuilder, DTColumnBuilder) {
48+
var vm = this;
49+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
50+
.withPaginationType('full_numbers')
51+
// Active Select plugin
52+
.withSelect({
53+
style: 'os',
54+
selector: 'td:first-child'
55+
});
56+
vm.dtColumns = [
57+
DTColumnBuilder.newColumn(null).withTitle('')
58+
.notSortable()
59+
.withClass('select-checkbox')
60+
// Need to define the mRender function, otherwise we get a [Object Object]
61+
.renderWith(function() {return '';}),
62+
DTColumnBuilder.newColumn('id').withTitle('ID'),
63+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
64+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
65+
];
66+
}
67+
68+
</div>
69+
</tab>
70+
</tabset>
71+
</section>
72+
</article>

‎demo/withPlugins/withSelect.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use strict';
2+
angular.module('showcase.withSelect', ['datatables', 'datatables.select'])
3+
.controller('WithSelectCtrl', WithSelectCtrl);
4+
5+
function WithSelectCtrl(DTOptionsBuilder, DTColumnBuilder) {
6+
var vm = this;
7+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
8+
.withPaginationType('full_numbers')
9+
// Active Select plugin
10+
.withSelect({
11+
style: 'os',
12+
selector: 'td:first-child'
13+
});
14+
vm.dtColumns = [
15+
DTColumnBuilder.newColumn(null).withTitle('')
16+
.notSortable()
17+
.withClass('select-checkbox')
18+
// Need to define the mRender function, otherwise we get a [Object Object]
19+
.renderWith(function() {return '';}),
20+
DTColumnBuilder.newColumn('id').withTitle('ID'),
21+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
22+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
23+
];
24+
}

‎dist/plugins/buttons/angular-datatables.buttons.js

Lines changed: 0 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,3 @@
33
* https://github.com/l-lin/angular-datatables
44
* License: MIT
55
*/
6-
(function (window, document, $, angular) {
7-
8-
'use strict';
9-
10-
// See https://datatables.net/extensions/fixedheader/
11-
angular.module('datatables.fixedheader', ['datatables'])
12-
.config(dtFixedHeaderConfig)
13-
.run(initFixedHeaderPlugin);
14-
15-
/* @ngInject */
16-
function dtFixedHeaderConfig($provide) {
17-
$provide.decorator('DTOptionsBuilder', dtOptionsBuilderDecorator);
18-
19-
function dtOptionsBuilderDecorator($delegate) {
20-
var newOptions = $delegate.newOptions;
21-
var fromSource = $delegate.fromSource;
22-
var fromFnPromise = $delegate.fromFnPromise;
23-
24-
$delegate.newOptions = function() {
25-
return _decorateOptions(newOptions);
26-
};
27-
$delegate.fromSource = function(ajax) {
28-
return _decorateOptions(fromSource, ajax);
29-
};
30-
$delegate.fromFnPromise = function(fnPromise) {
31-
return _decorateOptions(fromFnPromise, fnPromise);
32-
};
33-
34-
return $delegate;
35-
36-
function _decorateOptions(fn, params) {
37-
var options = fn(params);
38-
options.withFixedHeader = withFixedHeader;
39-
return options;
40-
41-
/**
42-
* Add fixed header support
43-
* @param fixedHeaderOptions the plugin options
44-
* @returns {DTOptions} the options
45-
*/
46-
function withFixedHeader(fixedHeaderOptions) {
47-
options.hasFixedHeader = true;
48-
if (fixedHeaderOptions) {
49-
options.fixedHeaderOptions = fixedHeaderOptions;
50-
}
51-
return options;
52-
}
53-
}
54-
}
55-
dtOptionsBuilderDecorator.$inject = ['$delegate'];
56-
}
57-
dtFixedHeaderConfig.$inject = ['$provide'];
58-
59-
/* @ngInject */
60-
function initFixedHeaderPlugin(DTRendererService) {
61-
var fixedHeaderPlugin = {
62-
postRender: postRender
63-
};
64-
DTRendererService.registerPlugin(fixedHeaderPlugin);
65-
66-
function postRender(options, result) {
67-
if (options && options.hasFixedHeader) {
68-
new $.fn.dataTable.FixedHeader(result.DataTable, options.fixedHeaderOptions);
69-
}
70-
}
71-
}
72-
initFixedHeaderPlugin.$inject = ['DTRendererService'];
73-
74-
75-
})(window, document, jQuery, angular);

‎dist/plugins/buttons/angular-datatables.buttons.min.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,3 @@
33
* https://github.com/l-lin/angular-datatables
44
* License: MIT
55
*/
6-
!function(a,b,c,d){"use strict";function e(a){function b(a){function b(a,b){function c(a){return d.hasFixedHeader=!0,a&&(d.fixedHeaderOptions=a),d}var d=a(b);return d.withFixedHeader=c,d}var c=a.newOptions,d=a.fromSource,e=a.fromFnPromise;return a.newOptions=function(){return b(c)},a.fromSource=function(a){return b(d,a)},a.fromFnPromise=function(a){return b(e,a)},a}a.decorator("DTOptionsBuilder",b),b.$inject=["$delegate"]}function f(a){function b(a,b){a&&a.hasFixedHeader&&new c.fn.dataTable.FixedHeader(b.DataTable,a.fixedHeaderOptions)}var d={postRender:b};a.registerPlugin(d)}d.module("datatables.fixedheader",["datatables"]).config(e).run(f),e.$inject=["$provide"],f.$inject=["DTRendererService"]}(window,document,jQuery,angular);

‎dist/plugins/buttons/angular-datatables.select.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*!
2+
* angular-datatables - v0.5.1
3+
* https://github.com/l-lin/angular-datatables
4+
* License: MIT
5+
*/

‎dist/plugins/buttons/angular-datatables.select.min.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*!
2+
* angular-datatables - v0.5.1
3+
* https://github.com/l-lin/angular-datatables
4+
* License: MIT
5+
*/

‎grunt/concat.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ module.exports = {
1919
'<%= yeoman.build %>/plugins/tabletools/angular-datatables.tabletools.js': ['<%= yeoman.src %>/plugins/tabletools/*.js'],
2020
'<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js': ['<%= yeoman.src %>/plugins/fixedcolumns/*.js'],
2121
'<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.src %>/plugins/fixedheader/*.js'],
22-
'<%= yeoman.build %>/plugins/buttons/angular-datatables.buttons.js': ['<%= yeoman.src %>/plugins/fixedheader/*.js']
22+
'<%= yeoman.build %>/plugins/buttons/angular-datatables.buttons.js': ['<%= yeoman.src %>/plugins/buttons/*.js'],
23+
'<%= yeoman.build %>/plugins/buttons/angular-datatables.select.js': ['<%= yeoman.src %>/plugins/select/*.js']
2324
}
2425
},
2526
// Copy the source files with the banner in dist folder
@@ -35,7 +36,8 @@ module.exports = {
3536
'<%= yeoman.dist %>/plugins/tabletools/angular-datatables.tabletools.js': ['<%= yeoman.build %>/plugins/tabletools/angular-datatables.tabletools.js'],
3637
'<%= yeoman.dist %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js': ['<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js'],
3738
'<%= yeoman.dist %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js'],
38-
'<%= yeoman.dist %>/plugins/buttons/angular-datatables.buttons.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js']
39+
'<%= yeoman.dist %>/plugins/buttons/angular-datatables.buttons.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.buttons.js'],
40+
'<%= yeoman.dist %>/plugins/buttons/angular-datatables.select.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.select.js']
3941
}
4042
},
4143
bannerCSS: {

0 commit comments

Comments
 (0)