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

Commit c0ef401

Browse files
l-linl-lin
committed
Fix fixedHeader example #372
The columns were not lined up. Upgrading datatables-fixedheader to v3.0.0+ seems to do the trick. Add an example for other routers besides angular ui-router.
1 parent 321cfd0 commit c0ef401

File tree

412 files changed

+3360
-50028
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

412 files changed

+3360
-50028
lines changed

‎demo/withPlugins/withFixedHeader.html

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,21 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
1616
<p>
1717
<i class="fa fa-warning"></i>&nbsp;Beware when using routers. It seems that the header and footer stay
1818
in your DOM even when you change your application state. So you will need to tweak your code to remove them
19-
when exiting the state.
19+
when exiting the state. Here some examples:
2020
</p>
21+
<br />
2122
<p>
22-
For example, if you are using <a href="https://github.com/angular-ui/ui-router">Angular ui-router</a>, you can
23-
add an <code>onExit</code> callback like this:
23+
<button class="btn btn-danger" ng-click="showNgRouterExample = !showNgRouterExample;showOtherRouterExample=false">
24+
If you are using Angular ui-router
25+
</button>
26+
<button class="btn btn-danger" ng-click="showOtherRouterExample = !showOtherRouterExample;showNgRouterExample=false">Other routers</button>
2427
</p>
2528
<br />
29+
<div collapse="!showNgRouterExample">
30+
<p>
31+
If you are using <a href="https://github.com/angular-ui/ui-router">Angular ui-router</a>, you can
32+
add an <code>onExit</code> callback like this:
33+
</p>
2634
<div hljs>
2735
$stateProvider.state("contacts", {
2836
templateUrl: 'somewhereInDaSpace',
@@ -41,24 +49,24 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
4149
}
4250
});
4351
</div>
52+
</div>
53+
<div collapse="!showOtherRouterExample">
54+
<div hljs>
55+
$scope.$on('$routeChangeStart', function(event, next, current) {
56+
var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
57+
angular.element(fixedHeaderEle).remove();
58+
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
59+
angular.element(fixedFooterEle).remove();
60+
});
61+
</div>
62+
</div>
4463
</div>
4564
</section>
4665
<section class="showcase">
47-
<div ng-controller="WithFixedHeaderCtrl as showCase">
48-
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover">
49-
<tfoot>
50-
<tr>
51-
<th>ID</th>
52-
<th>First name</th>
53-
<th>Last name</th>
54-
</tr>
55-
</tfoot>
56-
</table>
57-
</div>
5866
<tabset>
5967
<tab heading="HTML">
6068
<div hljs>
61-
<link rel="stylesheet" href="vendor/datatables-fixedheader/css/dataTables.fixedHeader.css">
69+
<link rel="stylesheet" href="vendor/datatables-fixedheader/css/fixedHeader.dataTables.css">
6270
<!-- ... -->
6371
<div ng-controller="WithFixedHeaderCtrl as showCase">
6472
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover">
@@ -98,5 +106,16 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
98106
</div>
99107
</tab>
100108
</tabset>
109+
<div ng-controller="WithFixedHeaderCtrl as showCase">
110+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover">
111+
<tfoot>
112+
<tr>
113+
<th>ID</th>
114+
<th>First name</th>
115+
<th>Last name</th>
116+
</tr>
117+
</tfoot>
118+
</table>
119+
</div>
101120
</section>
102121
</article>

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<link rel="stylesheet" href="vendor/datatables-responsive/css/dataTables.responsive.css">
2222
<link rel="stylesheet" href="vendor/datatables-scroller/css/dataTables.scroller.css">
2323
<link rel="stylesheet" href="vendor/datatables-fixedcolumns/css/dataTables.fixedColumns.css">
24-
<link rel="stylesheet" href="vendor/datatables-fixedheader/css/dataTables.fixedHeader.css">
24+
<link rel="stylesheet" href="vendor/datatables-fixedheader/css/fixedHeader.dataTables.css">
2525
<link rel="stylesheet" href="vendor/backtotop/backtotop.min.css">
2626
<link rel="stylesheet" href="vendor/highlightjs/styles/github.css">
2727
<link rel="stylesheet" href="dist/plugins/bootstrap/datatables.bootstrap.min.css">

‎vendor/datatables-fixedheader/.bower.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
{
22
"name": "datatables-fixedheader",
3-
"version": "2.1.2",
3+
"version": "3.0.0",
44
"main": [
55
"js/dataTables.fixedHeader.js",
6-
"css/dataTables.fixedHeader.css"
6+
"css/fixedHeader.dataTables.scss"
77
],
88
"dependencies": {
99
"jquery": ">=1.7.0",
10-
"datatables": ">=1.9.0"
10+
"datatables": ">=1.10.7"
1111
},
1212
"homepage": "https://github.com/DataTables/FixedHeader",
13-
"_release": "2.1.2",
13+
"_release": "3.0.0",
1414
"_resolution": {
1515
"type": "version",
16-
"tag": "2.1.2",
17-
"commit": "1b7ce4cfe953baebf36f8f9389caa393ca14b436"
16+
"tag": "3.0.0",
17+
"commit": "e21be854efd67b406466ef9a9bc8c27c766148a1"
1818
},
1919
"_source": "git://github.com/DataTables/FixedHeader.git",
20-
"_target": "2.1.2",
20+
"_target": "3.0.0",
2121
"_originalSource": "datatables-fixedheader",
2222
"_direct": true
2323
}

‎vendor/datatables-fixedheader/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.sass-cache

‎vendor/datatables-fixedheader/License.txt

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
MIT license
2+
3+
Copyright (c) 2009-2015 SpryMedia Limited
4+
http://datatables.net
5+
6+
Permission is hereby granted, free of charge, to any person obtaining a copy
7+
of this software and associated documentation files (the "Software"), to deal
8+
in the Software without restriction, including without limitation the rights
9+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the Software is
11+
furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in
14+
all copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
THE SOFTWARE.

‎vendor/datatables-fixedheader/Readme.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# FixedHeader
2+
3+
The FixedHeader plug-in will freeze in place the header, footer and left and/or right most columns in a DataTable, ensuring that title information will remain always visible.
4+
5+
6+
# Installation
7+
8+
To use FixedHeader the best way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](http://datatables.net/extensions/fixedheader/) for full details.
9+
10+
11+
# Basic usage
12+
13+
FixedHeader is initialised using the `fixedHeader` option in the DataTables constructor - a simple boolean `true` will enable the feature. Further options can be specified using this option as an object - see the documentation for details.
14+
15+
Example:
16+
17+
```js
18+
$(document).ready( function () {
19+
$('#myTable').DataTable( {
20+
fixedHeader: true
21+
} );
22+
} );
23+
```
24+
25+
26+
# Documentation / support
27+
28+
* [Documentation](https://datatables.net/extensions/fixedheader/)
29+
* [DataTables support forums](http://datatables.net/forums)
30+
31+
32+
# GitHub
33+
34+
If you fancy getting involved with the development of FixedHeader and help make it better, please refer to its [GitHub repo](https://github.com/DataTables/FixedHeader).
35+

‎vendor/datatables-fixedheader/Readme.txt

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎vendor/datatables-fixedheader/bower.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "datatables-fixedheader",
3-
"version": "2.1.2",
3+
"version": "3.0.0",
44
"main": [
55
"js/dataTables.fixedHeader.js",
6-
"css/dataTables.fixedHeader.css"
6+
"css/fixedHeader.dataTables.scss"
77
],
88
"dependencies": {
99
"jquery": ">=1.7.0",
10-
"datatables": ">=1.9.0"
10+
"datatables": ">=1.10.7"
1111
}
1212
}

‎vendor/datatables-fixedheader/css/dataTables.fixedHeader.css

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎vendor/datatables-fixedheader/css/fixedHeader.bootstrap.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
table.dataTable.fixedHeader-floating,
2+
table.dataTable.fixedHeader-locked {
3+
background-color: white;
4+
margin-top: 0 !important;
5+
margin-bottom: 0 !important; }
6+
7+
table.dataTable.fixedHeader-floating {
8+
position: fixed; }
9+
10+
table.dataTable.fixedHeader-locked {
11+
position: absolute; }

‎vendor/datatables-fixedheader/css/fixedHeader.bootstrap.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
table.dataTable.fixedHeader-floating,
3+
table.dataTable.fixedHeader-locked {
4+
background-color: white;
5+
margin-top: 0 !important;
6+
margin-bottom: 0 !important;
7+
}
8+
9+
table.dataTable.fixedHeader-floating {
10+
position: fixed;
11+
}
12+
13+
table.dataTable.fixedHeader-locked {
14+
position: absolute;
15+
}

‎vendor/datatables-fixedheader/css/fixedHeader.dataTables.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
table.fixedHeader-floating {
2+
position: fixed;
3+
background-color: white; }
4+
5+
table.fixedHeader-floating.no-footer {
6+
border-bottom-width: 0; }
7+
8+
table.fixedHeader-locked {
9+
position: absolute;
10+
background-color: white; }
11+
12+
table.fixedHeader-locked {
13+
position: absolute;
14+
background-color: white; }

‎vendor/datatables-fixedheader/css/fixedHeader.dataTables.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
3+
table.fixedHeader-floating {
4+
position: fixed;
5+
background-color: white;
6+
}
7+
8+
table.fixedHeader-floating.no-footer {
9+
border-bottom-width: 0;
10+
}
11+
12+
table.fixedHeader-locked {
13+
position: absolute;
14+
background-color: white;
15+
}
16+
17+
table.fixedHeader-locked {
18+
position: absolute;
19+
background-color: white;
20+
}

‎vendor/datatables-fixedheader/css/fixedHeader.foundation.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
table.dataTable.fixedHeader-floating,
2+
table.dataTable.fixedHeader-locked {
3+
background-color: white;
4+
margin-top: 0 !important;
5+
margin-bottom: 0 !important; }
6+
7+
table.dataTable.fixedHeader-floating {
8+
position: fixed; }
9+
10+
table.dataTable.fixedHeader-locked {
11+
position: absolute; }

‎vendor/datatables-fixedheader/css/fixedHeader.foundation.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
table.dataTable.fixedHeader-floating,
3+
table.dataTable.fixedHeader-locked {
4+
background-color: white;
5+
margin-top: 0 !important;
6+
margin-bottom: 0 !important;
7+
}
8+
9+
table.dataTable.fixedHeader-floating {
10+
position: fixed;
11+
}
12+
13+
table.dataTable.fixedHeader-locked {
14+
position: absolute;
15+
}

‎vendor/datatables-fixedheader/css/fixedHeader.jqueryui.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
table.fixedHeader-floating {
2+
position: fixed;
3+
background-color: white; }
4+
5+
table.fixedHeader-locked {
6+
position: absolute;
7+
background-color: white; }

‎vendor/datatables-fixedheader/css/fixedHeader.jqueryui.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
3+
table.fixedHeader-floating {
4+
position: fixed;
5+
background-color: white;
6+
}
7+
8+
9+
table.fixedHeader-locked {
10+
position: absolute;
11+
background-color: white;
12+
}

0 commit comments

Comments
 (0)