vitalif-js
/
Fixed-Header-Table
mirror of https://github.com/vitalif/Fixed-Header-Table
1
0
Fork 0
Code Issues Releases Wiki Activity

Added support for collapsed borders (unfinished) 

Signed-off-by: Mark Malek <markmmalek@me.com>
master
Mark Malek 2011-04-30 20:45:15 -04:00
parent 3a6d25d7e2
commit 771268b06c
4 changed files with 179 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/myTheme.css
View File

@ -1,7 +1,20 @@
.myTable {
width: 500px;
}
.myOtherTable {
width: 850px;
}
.myTable th.first {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.myTable th.last {
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
td, th {
}
tbody td {
background: #eee !important;
}

23
demo.js
View File

@ -1,15 +1,18 @@
$(document).ready(function() {
$('.myTable, .myOtherTable').fixedHeaderTable({ tableHeight: '350', hasFooter: true, autoShow: false });
$('.myOtherTable').fixedHeaderTable('show');
setTimeout(showMyTable, 5000);
$('.myTable').fixedHeaderTable({ width: '600', height: '350', footer: true });
setTimeout(hideMyTable, 8000);
$('a.makeTable').bind('click', function() {
$('.myTable').fixedHeaderTable('destroy');
$('.myTable th, .myTable td')
.css('border', $('#border').val() + 'px solid ' + $('#color').val());
$('.myTable').fixedHeaderTable({ width: $('#width').val(), height: $('#height').val(), footer: true });
});
});
showMyTable = function() {
$('.myTable').fixedHeaderTable('show');
}
hideMyTable = function() {
$('.myTable').fixedHeaderTable('destroy');
var resetup = function() {
console.log('test');
$('.myTable').fixedHeaderTable('setup', { width: '400', height: '550', footer: true });
}

182
jquery.fixedheadertable.js
View File

@ -11,13 +11,17 @@
// plugin's default options
var defaults = {
width: '100%',
height: '100%',
borderCollapse: true,
autoShow: true,
loader: false,
hasFooter: false,
colBorder: true,
cloneHeaderToFooter: false,
footer: false,
cloneHeadToFoot: false,
cloneHeaderToFooter: false, // deprecated option
autoResize: false,
onComplete: null
complete: null
}
@ -56,13 +60,17 @@
if ( helpers._isTable($self) ) {
methods.setup.apply(this, Array.prototype.slice.call(arguments, 1));
$.isFunction(options.complete) && options.complete.call(this);
} else {
$.error('Invalid table mark-up');
}
});
},
// a public method. for demonstration purposes only - remove it!
setup: function() {
setup: function( options ) {
var $self = $(this),
self = this,
$thead = $self.find('thead'),
@ -74,7 +82,15 @@
$divBody,
$fixedHeadRow,
$temp;
settings.scrollbarOffset = helpers._getScrollbarWidth();
settings.themeClassName = $self.attr('class');
$self.css({
width: settings.width - settings.scrollbarOffset,
height: settings.height
});
if ( !$self.closest('.fht-table-wrapper').length ) {
$self.addClass('fht-table');
$self.wrap('<div class="fht-table-wrapper"></div>');
@ -83,57 +99,79 @@
$wrapper = $self.closest('.fht-table-wrapper');
$wrapper.css({
width: $self.outerWidth(true),
height: settings.tableHeight
width: settings.width,
height: settings.height
});
if ( !$self.hasClass('fht-table-init') ) {
$self.wrap('<div class="fht-tbody"></div>');
var tbodyHeight = $wrapper.height() - $thead.outerHeight(true) - $tfoot.outerHeight(true);
$divBody = $self.closest('.fht-tbody');
$divBody.css({
'height': tbodyHeight
});
}
var tableProps = helpers._getTableProps($self);
var tableProps = helpers._getTableProps($self);
if ( !$self.hasClass('fht-table-init') ) {
$divHead = $('<div class="fht-head"><table class="fht-table"></table></div>').prependTo($wrapper);
$thead.clone().appendTo($divHead.find('table'));
} else {
$divHead = $wrapper.find('div.fht-head');
}
$divHead.find('table')
.addClass(settings.themeClassName);
$divHead.find('thead th').each(function(index) {
$temp = $('<div class="fht-th"></div>').appendTo($(this));
$temp.css({
'width': tableProps.thead[index]
});
});
helpers._setupClone( $divHead, tableProps.thead );
$self.css({
'margin-top': -$thead.outerHeight(true) - tableProps.border
});
$self.css({
'margin-top': -$thead.outerHeight(true)
});
if ( settings.footer ) {
if ( !$self.hasClass('fht-table-init') ) {
$divFoot = $('<div class="tfoot"><table class="fht-table"></table></div>').appendTo($wrapper);
} else {
$divFoot = $wrapper.find('div.tfoot');
}
if ( settings.hasFooter && $self.find('tfoot').length ) {
$divFoot = $('<div class="tfoot"><table class="fht-table"></table></div>').appendTo($wrapper);
$divFoot.find('table')
.addClass(settings.themeClassName);
if ( settings.cloneHeadToFoot || settings.cloneHeaderToFooter ) {
$thead.find('tr').clone().appendTo($divFoot.find('table tfoot'));
helpers._setupClone( $divFoot, tableProps.thead );
} else if ( !$self.find('tfoot').length && ( !settings.cloneHeadToFoot || !settings.cloneHeaderToFooter ) ) {
$.error( 'Invalid markup: tfoot does not exist in table!');
return self;
} else {
$tfoot.appendTo($divFoot.find('table'));
$divFoot.find('table')
.css({
'margin-top': -tableProps.border
});
helpers._setupClone( $divFoot, tableProps.thead );
$divFoot.find('tfoot td').each(function(index) {
$temp = $('<div class="fht-td"></div>').appendTo($(this));
$temp.css({
'width': tableProps.thead[index]
});
});
}
if ( !settings.autoShow ) {
$wrapper.hide();
}
}
var tbodyHeight = $wrapper.height() - $thead.outerHeight(true) - $tfoot.outerHeight(true) - tableProps.border;
$divBody = $self.closest('.fht-tbody');
$divBody.css({
'height': tbodyHeight
});
if ( !settings.autoShow ) {
$wrapper.hide();
}
$self.addClass('fht-table-init');
return self;
},
@ -165,7 +203,9 @@
$self.insertBefore($wrapper)
.removeAttr('style')
.append($wrapper.find('tfoot'))
.removeClass('fht-table');
.removeClass('fht-table fht-table-init')
.find('.fht-cell')
.remove();
$wrapper.remove();
@ -184,7 +224,6 @@
// arguments to be passed to the method
var helpers = {
// a private method. for demonstration purposes only - remove it!
_isTable: function( $obj ) {
var $self = $obj,
hasTable = $self.is('table'),
@ -202,18 +241,67 @@
_getTableProps: function( $obj ) {
var tableProp = {
thead: {},
tbody: {}
tbody: {},
border: 0
};
tableProp.border = ( $obj.find('th:first-child').outerWidth() - $obj.find('th:first-child').innerWidth() ) / 2;
$obj.find('thead th').each(function(index) {
tableProp.thead[index] = $(this).width();
tableProp.thead[index] = $(this).width() + tableProp.border;
});
$obj.find('tbody tr:first-child td').each(function(index) {
tableProp.tbody[index] = $(this).width();
tableProp.tbody[index] = $(this).width() + tableProp.border;
});
return tableProp;
},
_setupClone: function( $head, cellArray ) {
var $self = $head,
selector = ( $self.find('thead').length ) ?
'thead th' :
( $self.find('tfoot').length ) ?
'tfoot td' :
'tbody td',
$cell;
$self.css({
'margin-right': settings.scrollbarOffset
});
$self.find(selector).each(function(index) {
$cell = ( $(this).find('div.fht-cell').length ) ? $(this).find('div.fht-cell') : $('<div class="fht-cell"></div>').appendTo($(this));
$cell.css({
'width': cellArray[index]
});
});
},
_getScrollbarWidth: function() {
var scrollbarWidth = 0;
if ( !scrollbarWidth ) {
if ( $.browser.msie ) {
var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
$textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
scrollbarWidth = $textarea1.width() - $textarea2.width();
$textarea1.add($textarea2).remove();
} else {
var $div = $('<div />')
.css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
.prependTo('body').append('<div />').find('div')
.css({ width: '100%', height: 200 });
scrollbarWidth = 100 - $div.width();
$div.parent().remove();
}
}
return scrollbarWidth;
}
}

167
test.html
View File

@ -9,16 +9,24 @@
<script src="demo.js"></script>
</head>
<body>
<div>
<ul>
<li><input type="text" id="width" value="" placeholder="width in px" /></li>
<li><input type="text" id="height" value="" placeholder="height in px" /></li>
<li><input type="text" id="border" value="" placeholder="border in px" /></li>
<li><input type="text" id="color" value="" placeholder="color (#FFFFFF)" /></li>
<li><a href="#" class="makeTable">Resize Table</a></li>
</ul>
</div>
<table class="myTable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Browser</th>
<th class="first">Browser</th>
<th>Visits</th>
<th>Pages/Visit</th>
<th>Avg. Time on Site</th>
<th>% New Visits</th>
<th>Bounce Rate</th>
<th class="last">Bounce Rate</th>
</tr>
</thead>
<tfoot>
@ -162,158 +170,5 @@
</tr>
</tbody>
</table>
<table class="myOtherTable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Browser</th>
<th>Visits</th>
<th>Pages/Visit</th>
<th>Avg. Time on Site</th>
<th>% New Visits</th>
<th>Bounce Rate</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Browser</td>
<td>Visits</td>
<td>Pages/Visit</td>
<td>Avg. Time on Site</td>
<td>% New Visits</td>
<td>Bounce Rate</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Safari</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Safari</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
</tbody>
</table>
</body>
</html>