Skip to content

Commit b59848c

Browse files
AllanJardAllanJard
committed
New: fh-api fixedHeader.footerOffset() and fh-api fixedHeader.headerOffset() methods to get / set the offset of the fixed header and footer.
- From #72 - thanks @miljenko1 - Added documentation - Rewritten to not use internal properties of the FixedHeader instance externally - Using `$.each()` to add the DataTables API methods to help save reproducing almost duplicate code
1 parent a61d344 commit b59848c

5 files changed

+125
-30
lines changed

‎docs/api/fixedHeader.footerOffset().xml

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<dt-api library="FixedHeader">
3+
<name>fixedHeader.footerOffset()</name>
4+
<summary>Get / set the fixed footer's offset</summary>
5+
<since>3.1.0</since>
6+
7+
<type type="function">
8+
<signature>fixedHeader.footerOffset()</signature>
9+
<returns type="integer">
10+
The current footer offset
11+
</returns>
12+
<description>
13+
Get the fixed footer's offset.
14+
</description>
15+
</type>
16+
17+
<type type="function">
18+
<signature>fixedHeader.footerOffset( offset )</signature>
19+
<returns type="DataTables.Api">
20+
The DataTables API for chaining
21+
</returns>
22+
<description>
23+
Set the fixed footer's offset
24+
</description>
25+
</type>
26+
27+
<description>
28+
This method provides the ability to control the offset of the table's fixed footer. This offset can be useful if you have an element floating at the bottom of a page (a set of common navigation links for example) and you wish to have the footer stick to the top of that element rather than to the bottom of the page.
29+
30+
This method, and its counterpart control for the header, `fh-api fixedHeader.headerOffset()`, can be useful for cases where that offset can change dynamically (a fixed element that grows on mouse over for example).
31+
32+
Please be aware that the footer's position will immediately update once this method has been executed, if required by the page's scrolling position. No other update method is required.
33+
</description>
34+
35+
<example title="Set the footer's offset"><![CDATA[
36+
37+
var table = $('#myTable').DataTable();
38+
39+
table.fixedHeader.footerOffset( 10 );
40+
41+
]]></example>
42+
43+
<related>fh-init fixedHeader.footerOffset</related>
44+
<related>fh-api fixedHeader.headerOffset</related>
45+
</dt-api>

‎docs/api/fixedHeader.headerOffset().xml

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<dt-api library="FixedHeader">
3+
<name>fixedHeader.headerOffset()</name>
4+
<summary>Get / set the fixed header's offset</summary>
5+
<since>3.1.0</since>
6+
7+
<type type="function">
8+
<signature>fixedHeader.headerOffset()</signature>
9+
<returns type="integer">
10+
The current header offset
11+
</returns>
12+
<description>
13+
Get the fixed header's offset.
14+
</description>
15+
</type>
16+
17+
<type type="function">
18+
<signature>fixedHeader.headerOffset( offset )</signature>
19+
<returns type="DataTables.Api">
20+
The DataTables API for chaining
21+
</returns>
22+
<description>
23+
Set the fixed header's offset
24+
</description>
25+
</type>
26+
27+
<description>
28+
This method provides the ability to control the offset of the fixed header. This offset can be useful if you have an element floating at the top of a page (a navigation menu for example) and you wish to have the header stick to the bottom of that element rather than to the top of the page.
29+
30+
This method, and its counterpart control for the footer, `fh-api fixedHeader.footerOffset()`, can be useful for cases where that offset can change dynamically (a fixed element that grows on mouse over for example).
31+
32+
Please be aware that the header's position will immediately update once this method has been executed, if required by the page's scrolling position. No other update method is required.
33+
</description>
34+
35+
<example title="Set the header's offset"><![CDATA[
36+
37+
var table = $('#myTable').DataTable();
38+
39+
table.fixedHeader.headerOffset( 10 );
40+
41+
]]></example>
42+
43+
<related>fh-init fixedHeader.headerOffset</related>
44+
<related>fh-api fixedHeader.footerOffset</related>
45+
</dt-api>

‎docs/option/fixedHeader.footerOffset.xml

+3
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,7 @@ $('#example').DataTable( {
3939
} );
4040
4141
]]></example>
42+
43+
<related>fh-init fixedHeader.headerOffset</related>
44+
<related>fh-api fixedHeader.footerOffset()</related>
4245
</dt-option>

‎docs/option/fixedHeader.headerOffset.xml

+3
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,7 @@ $('#example').DataTable( {
3737
} );
3838
3939
]]></example>
40+
41+
<related>fh-init fixedHeader.footerOffset</related>
42+
<related>fh-api fixedHeader.headerOffset()</related>
4043
</dt-option>

‎js/dataTables.fixedHeader.js

+29-30
Original file line numberDiff line numberDiff line change
@@ -149,23 +149,33 @@ $.extend( FixedHeader.prototype, {
149149
},
150150

151151
/**
152-
* Set headerOffset
152+
* Set header offset
153153
*
154154
* @param {int} new value for headerOffset
155155
*/
156-
headerOffset: function ( topOffset )
156+
headerOffset: function ( offset )
157157
{
158-
this.c.headerOffset = topOffset;
158+
if ( offset !== undefined ) {
159+
this.c.headerOffset = offset;
160+
this.update();
161+
}
162+
163+
return this.c.headerOffset;
159164
},
160165

161166
/**
162-
* Set footerOffset
167+
* Set footer offset
163168
*
164169
* @param {int} new value for footerOffset
165170
*/
166-
footerOffset: function ( bottomOffset )
171+
footerOffset: function ( offset )
167172
{
168-
this.c.footerOffset = bottomOffset;
173+
if ( offset !== undefined ) {
174+
this.c.footerOffset = offset;
175+
this.update();
176+
}
177+
178+
return this.c.footerOffset;
169179
},
170180

171181

@@ -585,34 +595,23 @@ DataTable.Api.register( 'fixedHeader.disable()', function ( ) {
585595
} );
586596
} );
587597

588-
DataTable.Api.register( 'fixedHeader.headerOffset()', function ( topOffset ) {
589-
if ( topOffset === undefined ) {
590-
return this.context.length !== 0 ?
591-
this.context[0]._fixedHeader.c.headerOffset :
592-
undefined;
593-
}
594-
return this.iterator( 'table', function ( ctx ) {
595-
var fh = ctx._fixedHeader;
598+
$.each( ['header', 'footer'], function ( i, el ) {
599+
DataTable.Api.register( 'fixedHeader.'+el+'Offset()', function ( offset ) {
600+
var ctx = this.context;
596601

597-
if ( fh ) {
598-
fh.headerOffset( topOffset );
602+
if ( offset === undefined ) {
603+
return ctx.length && ctx[0]._fixedHeader ?
604+
ctx[0]._fixedHeader[el +'Offset']() :
605+
undefined;
599606
}
600-
} );
601-
} );
602607

603-
DataTable.Api.register( 'fixedHeader.footerOffset()', function ( bottomOffset ) {
604-
if ( bottomOffset === undefined ) {
605-
return this.context.length !== 0 ?
606-
this.context[0]._fixedHeader.c.footerOffset :
607-
undefined;
608-
}
609-
610-
return this.iterator( 'table', function ( ctx ) {
611-
var fh = ctx._fixedHeader;
608+
return this.iterator( 'table', function ( ctx ) {
609+
var fh = ctx._fixedHeader;
612610

613-
if ( fh ) {
614-
fh.footerOffset( bottomOffset );
615-
}
611+
if ( fh ) {
612+
fh[ el +'Offset' ]( offset );
613+
}
614+
} );
616615
} );
617616
} );
618617

0 commit comments

Comments
 (0)