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

Commit d9f88c4

Browse files
l-linl-lin
committed
FixedHeader support #196 
1 parent d78139d commit d9f88c4

20 files changed

+1404
-8
lines changed

‎demo/api/apiOptionsBuilder.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -786,6 +786,26 @@ <h3><code>DTOptionsBuilder</code></h3>
786786
rightColumns: 1
787787
});
788788
}
789+
</div>
790+
</td>
791+
</tr>
792+
<tr>
793+
<td><code>DTOptions</code></td>
794+
<td><code>withFixedHeader(fixedHeaderOptions)</code></td>
795+
<td>
796+
<p>
797+
Add <a href="https://datatables.net/extensions/fixedheader/">FixedHeader</a> compatibility.
798+
</p>
799+
<div hljs language="js">
800+
angular.module('myModule', ['datatables', 'datatables.fixedheader'])
801+
.controller('MyCtrl', MyCtrl);
802+
function MyCtrl(DTOptionsBuilder) {
803+
var vm = this;
804+
vm.dtOptions = DTOptionsBuilder.newOptions()
805+
.withFixedHeader({
806+
bottom: true
807+
});
808+
}
789809
</div>
790810
</td>
791811
</tr>

‎demo/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ angular.module('showcase', [
2828
'showcase.withScroller',
2929
'showcase.withTableTools',
3030
'showcase.withFixedColumns',
31+
'showcase.withFixedHeader',
3132

3233
'showcase.usages',
3334
'ui.bootstrap',

‎demo/usages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,8 @@ angular.module('showcase.usages', ['ngResource'])
8787
}, {
8888
name: 'withFixedColumns',
8989
label: 'With Fixed Columns'
90+
}, {
91+
name: 'withFixedHeader',
92+
label: 'With Fixed Header'
9093
}]
9194
});

‎demo/withPlugins/withFixedColumns.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
1212
<p>
1313
You also need to add the dependency <code>datatables.fixedcolumns</code> to your Angular app.
1414
</p>
15-
<p>
16-
See the <a ui-sref="api">API</a> for the complete list of methods of the helper.
17-
</p>
1815
</section>
1916
<section class="showcase">
2017
<div ng-controller="WithFixedColumnsCtrl as showCase">
@@ -669,6 +666,7 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
669666
<div hljs>
670667
<link rel="stylesheet" href="vendor/datatables-fixedcolumns/css/dataTables.fixedColumns.css">
671668
<style>
669+
/* Ensure that the demo table scrolls */
672670
#showcase-fixedcolumns_wrapper th,
673671
#showcase-fixedcolumns_wrappertd {
674672
white-space: nowrap;

‎demo/withPlugins/withFixedHeader.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;With the DataTables <a href="https://datatables.net/extensions/fixedheader/">Fixed Header</a></h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
The <code>angular-datatables</code> also provides an API in order to make the plugin <code>FixedHeader</code> works with datatables.
8+
</p>
9+
<p>
10+
You need to add the files <code>angular-datatables.fixedheader.min.js</code> to your HTML file.
11+
</p>
12+
<p>
13+
You also need to add the dependency <code>datatables.fixedheader</code> to your Angular app.
14+
</p>
15+
</section>
16+
<section class="showcase">
17+
<div ng-controller="WithFixedHeaderCtrl as showCase">
18+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover">
19+
<tfoot>
20+
<tr>
21+
<th>ID</th>
22+
<th>First name</th>
23+
<th>Last name</th>
24+
</tr>
25+
</tfoot>
26+
</table>
27+
</div>
28+
<tabset>
29+
<tab heading="HTML">
30+
<div hljs>
31+
<link rel="stylesheet" href="vendor/datatables-fixedheader/css/dataTables.fixedHeader.css">
32+
<!-- ... -->
33+
<div ng-controller="WithFixedHeaderCtrl as showCase">
34+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover">
35+
<tfoot>
36+
<tr>
37+
<th>ID</th>
38+
<th>First name</th>
39+
<th>Last name</th>
40+
</tr>
41+
</tfoot>
42+
</table>
43+
</div>
44+
<!-- ... -->
45+
<script src="vendor/datatables-fixedheader/js/dataTables.fixedHeader.js"></script>
46+
<script src="vendor/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
47+
</div>
48+
</tab>
49+
<tab heading="JS">
50+
<div hljs language="js">
51+
angular.module('showcase.withFixedHeader', ['datatables', 'datatables.fixedheader'])
52+
.controller('WithFixedHeaderCtrl', WithFixedHeaderCtrl);
53+
54+
function WithFixedHeaderCtrl(DTOptionsBuilder, DTColumnBuilder) {
55+
var vm = this;
56+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
57+
.withPaginationType('full_numbers')
58+
.withDisplayLength(25)
59+
.withFixedHeader({
60+
bottom: true
61+
});
62+
vm.dtColumns = [
63+
DTColumnBuilder.newColumn('id').withTitle('ID'),
64+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
65+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
66+
];
67+
}
68+
</div>
69+
</tab>
70+
</tabset>
71+
</section>
72+
</article>

‎demo/withPlugins/withFixedHeader.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use strict';
2+
angular.module('showcase.withFixedHeader', ['datatables', 'datatables.fixedheader'])
3+
.controller('WithFixedHeaderCtrl', WithFixedHeaderCtrl);
4+
5+
function WithFixedHeaderCtrl(DTOptionsBuilder, DTColumnBuilder) {
6+
var vm = this;
7+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
8+
.withPaginationType('full_numbers')
9+
.withDisplayLength(25)
10+
.withFixedHeader({
11+
bottom: true
12+
});
13+
vm.dtColumns = [
14+
DTColumnBuilder.newColumn('id').withTitle('ID'),
15+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
16+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
17+
];
18+
}

‎dist/plugins/tabletools/angular-datatables.fixedcolumns.js renamed to ‎dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function dtFixedColumnsConfig($provide) {
3939
return options;
4040

4141
/**
42-
* Add column filter support
42+
* Add fixed columns support
4343
* @param fixedColumnsOptions the plugin options
4444
* @returns {DTOptions} the options
4545
*/

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/*!
2+
* angular-datatables - v0.4.0
3+
* https://github.com/l-lin/angular-datatables
4+
* License: MIT
5+
*/
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/fixedheader/angular-datatables.fixedheader.min.js

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎grunt/concat.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ module.exports = {
1616
'<%= yeoman.build %>/plugins/colvis/angular-datatables.colvis.js': ['<%= yeoman.src %>/plugins/colvis/*.js'],
1717
'<%= yeoman.build %>/plugins/scroller/angular-datatables.scroller.js': ['<%= yeoman.src %>/plugins/scroller/*.js'],
1818
'<%= yeoman.build %>/plugins/tabletools/angular-datatables.tabletools.js': ['<%= yeoman.src %>/plugins/tabletools/*.js'],
19-
'<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js': ['<%= yeoman.src %>/plugins/fixedcolumns/*.js']
19+
'<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js': ['<%= yeoman.src %>/plugins/fixedcolumns/*.js'],
20+
'<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.src %>/plugins/fixedheader/*.js']
2021
}
2122
},
2223
// Copy the source files with the banner in dist folder
@@ -29,7 +30,8 @@ module.exports = {
2930
'<%= yeoman.dist %>/plugins/colvis/angular-datatables.colvis.js': ['<%= yeoman.build %>/plugins/colvis/angular-datatables.colvis.js'],
3031
'<%= yeoman.dist %>/plugins/scroller/angular-datatables.scroller.js': ['<%= yeoman.build %>/plugins/scroller/angular-datatables.scroller.js'],
3132
'<%= yeoman.dist %>/plugins/tabletools/angular-datatables.tabletools.js': ['<%= yeoman.build %>/plugins/tabletools/angular-datatables.tabletools.js'],
32-
'<%= yeoman.dist %>/plugins/tabletools/angular-datatables.fixedcolumns.js': ['<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js']
33+
'<%= yeoman.dist %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js': ['<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js'],
34+
'<%= yeoman.dist %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js']
3335
}
3436
},
3537
bannerCSS: {

0 commit comments

Comments
 (0)