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

Merge pull request #45 from macfreek/stage/classes 

Retain CSS classes
master
Mark Malek 2012-03-08 16:45:45 -08:00
parent e2df04560c b149990474
commit 4ad1319a32
4 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
demo/css/myTheme.css
View File

@ -50,6 +50,18 @@
height: 500px; height: 500px;
} }
.height250 {
height: 250px;
overflow-x: auto;
overflow-y: auto;
}
.height400 {
height: 400px;
overflow-x: auto;
overflow-y: auto;
}
.fancyTable td, .fancyTable th { .fancyTable td, .fancyTable th {
/* appearance */ /* appearance */
border: 1px solid #778899; border: 1px solid #778899;

14
demo/demo.js
View File

@ -1,13 +1,13 @@
$(document).ready(function() { $(document).ready(function() {
$('.myTable01').fixedHeaderTable({ height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false }); $('#myTable01').fixedHeaderTable({ footer: true, cloneHeadToFoot: true, altClass: 'odd', autoShow: false });
$('.myTable01').fixedHeaderTable('show', 1000); $('#myTable01').fixedHeaderTable('show', 1000);
$('.myTable02').fixedHeaderTable({ height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' }); $('#myTable02').fixedHeaderTable({ footer: true, altClass: 'odd' });
$('.myTable03').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' }); $('#myTable05').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 });
$('.myTable04').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3, themeClass: 'fancyTable' }); $('#myTable03').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 });
$('.myTable05').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' }); $('#myTable04').fixedHeaderTable({ altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3 });
}); });

40
demo/test.html
View File

@ -15,19 +15,17 @@
<div class="grid_4"> <div class="grid_4">
<pre> <pre>
<code> <code>
$('.myTable01').fixedHeaderTable({ $('#myTable01').fixedHeaderTable({
height: '250',
footer: true, footer: true,
cloneHeadToFoot: true, cloneHeadToFoot: true,
altClass: 'odd', altClass: 'odd',
themeClass: 'fancyTable',
autoShow: false autoShow: false
}); });
</code> </code>
</pre> </pre>
</div> </div>
<div class="grid_8"> <div class="grid_8 height250">
<table class="myTable01" cellpadding="0" cellspacing="0"> <table class="fancyTable" id="myTable01" cellpadding="0" cellspacing="0">
<thead> <thead>
<tr> <tr>
<th>Browser</th> <th>Browser</th>
@ -177,17 +175,15 @@ $('.myTable01').fixedHeaderTable({
<div class="grid_4"> <div class="grid_4">
<pre> <pre>
<code> <code>
$('.myTable02').fixedHeaderTable({ $('#myTable02').fixedHeaderTable({
height: '250',
footer: true, footer: true,
altClass: 'odd', altClass: 'odd',
themeClass: 'fancyDarkTable'
}); });
</code> </code>
</pre> </pre>
</div> </div>
<div class="grid_8"> <div class="grid_8 height250">
<table class="myTable02" cellpadding="0" cellspacing="0"> <table class="fancyTable" id="myTable02" cellpadding="0" cellspacing="0">
<thead> <thead>
<tr> <tr>
<th>Browser</th> <th>Browser</th>
@ -379,18 +375,16 @@ $('.myTable02').fixedHeaderTable({
<div class="grid_4"> <div class="grid_4">
<pre> <pre>
<code> <code>
$('.myTable05').fixedHeaderTable({ $('#myTable05').fixedHeaderTable({
height: '400',
altClass: 'odd', altClass: 'odd',
footer: true, footer: true,
fixedColumns: 1, fixedColumns: 1,
themeClass: 'fancyTable'
}); });
</code> </code>
</pre> </pre>
</div> </div>
<div class="grid_4"> <div class="grid_4 height400">
<table class="myTable05" cellpadding="0" cellspacing="0"> <table class="fancyTable" id="myTable05" cellpadding="0" cellspacing="0">
<thead> <thead>
<tr> <tr>
<th>Browser</th> <th>Browser</th>
@ -692,18 +686,16 @@ $('.myTable05').fixedHeaderTable({
<div class="grid_4"> <div class="grid_4">
<pre> <pre>
<code> <code>
$('.myTable03').fixedHeaderTable({ $('#myTable03').fixedHeaderTable({
height: '400',
altClass: 'odd', altClass: 'odd',
footer: true, footer: true,
fixedColumns: 1, fixedColumns: 1,
themeClass: 'fancyTable'
}); });
</code> </code>
</pre> </pre>
</div> </div>
<div class="grid_4"> <div class="grid_4 height400">
<table class="myTable03" cellpadding="0" cellspacing="0"> <table class="fancyTable" id="myTable03" cellpadding="0" cellspacing="0">
<thead> <thead>
<tr> <tr>
<th>Browser</th> <th>Browser</th>
@ -997,19 +989,17 @@ $('.myTable03').fixedHeaderTable({
<div class="grid_4"> <div class="grid_4">
<pre> <pre>
<code> <code>
$('.myTable04').fixedHeaderTable({ $('#myTable04').fixedHeaderTable({
height: '400',
altClass: 'odd', altClass: 'odd',
footer: true, footer: true,
cloneHeadToFoot: true, cloneHeadToFoot: true,
fixedColumn: 3, fixedColumn: 3,
themeClass: 'fancyTable'
}); });
</code> </code>
</pre> </pre>
</div> </div>
<div class="grid_4"> <div class="grid_4 height400">
<table class="myTable04" cellpadding="0" cellspacing="0"> <table class="fancyTable" id="myTable04" cellpadding="0" cellspacing="0">
<thead> <thead>
<tr> <tr>
<th>Browser</th> <th>Browser</th>

8
jquery.fixedheadertable.js
View File

@ -77,6 +77,7 @@
$temp, $temp,
tfootHeight = 0; tfootHeight = 0;
settings.originalTable = $(this).clone();
settings.includePadding = helpers._isPaddingIncludedWithWidth(); settings.includePadding = helpers._isPaddingIncludedWithWidth();
settings.scrollbarOffset = helpers._getScrollbarWidth(); settings.scrollbarOffset = helpers._getScrollbarWidth();
settings.themeClassName = settings.themeClass; settings.themeClassName = settings.themeClass;
@ -134,6 +135,7 @@
$divHead = $('<div class="fht-thead"><table class="fht-table"></table></div>').prependTo($wrapper); $divHead = $('<div class="fht-thead"><table class="fht-table"></table></div>').prependTo($wrapper);
} }
$divHead.find('table.fht-table').addClass(settings.originalTable.attr('class'));
$thead.clone().appendTo($divHead.find('table')); $thead.clone().appendTo($divHead.find('table'));
} else { } else {
$divHead = $wrapper.find('div.fht-thead'); $divHead = $wrapper.find('div.fht-thead');
@ -410,6 +412,10 @@
fixedBodyHeight = $fixedBody.find('.fht-tbody').height() - settings.scrollbarOffset, fixedBodyHeight = $fixedBody.find('.fht-tbody').height() - settings.scrollbarOffset,
$newRow; $newRow;
$thead.find('table.fht-table').addClass(settings.originalTable.attr('class'));
$tbody.find('table.fht-table').addClass(settings.originalTable.attr('class'));
$tfoot.find('table.fht-table').addClass(settings.originalTable.attr('class'));
$firstThChildren = $fixedBody.find('.fht-thead thead tr > *:lt(' + settings.fixedColumns + ')'); $firstThChildren = $fixedBody.find('.fht-thead thead tr > *:lt(' + settings.fixedColumns + ')');
fixedColumnWidth = settings.fixedColumns * tableProps.border; fixedColumnWidth = settings.fixedColumns * tableProps.border;
$firstThChildren.each(function(index) { $firstThChildren.each(function(index) {
@ -517,6 +523,7 @@
$divFoot = $('<div class="fht-tfoot"><table class="fht-table"></table></div>').appendTo($wrapper); $divFoot = $('<div class="fht-tfoot"><table class="fht-table"></table></div>').appendTo($wrapper);
} }
} }
$divFoot.find('table.fht-table').addClass(settings.originalTable.attr('class'));
switch (true) { switch (true) {
case !$tfoot.length && settings.cloneHeadToFoot == true && settings.footer == true: case !$tfoot.length && settings.cloneHeadToFoot == true && settings.footer == true:
@ -623,6 +630,7 @@
defaultHeight, defaultHeight,
newHeight; newHeight;
$obj.addClass(settings.originalTable.attr('class'));
$obj.appendTo('body'); $obj.appendTo('body');
defaultHeight = $obj.find('td').height(); defaultHeight = $obj.find('td').height();