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. 

Signed-off-by: Mark Malek <markmmalek@me.com>
master
Mark Malek 2011-04-30 20:44:30 -04:00
parent 0ff6ce3f4f
commit 3a6d25d7e2
6 changed files with 226 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
/.DS_Store

38
css/defaultTheme.css
View File

@ -20,48 +20,52 @@ table.fht-table tfoot,
table.fht-table tbody,
table.fht-table tr,
table.fht-table th,
table.fht-table td,
.fht-table-head table,
.fht-table-head table thead,
.fht-table-head table tr,
.fht-table-head table th {
table.fht-table td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
}
table.fht-table,
.fht-table-head table {
table.fht-table {
border-collapse: collapse;
border-spacing: 0;
}
}
/* @end */
/* @group Content */
div.fht-temp-div {
width:100px;
height:50px;
overflow: scroll;
}
div.fht-temp-div div {
width: 100%;
height:100px;
}
div.fht-table-wrapper {
overflow: hidden;
}
}
div.fht-tbody {
overflow-y: auto;
overflow-x: hidden;
}
}
table.fht-table,
.fht-table-head table {
table.fht-table {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 1em;
color: #050505;
}
}
table.fht-table th .fht-th {
table.fht-table .fht-cell {
height: 1px;
}
}
/* @end */

4
css/myTheme.css
View File

@ -1,3 +1,7 @@
.myTable {
width: 500px;
}
.myOtherTable {
width: 850px;
}

16
demo.js
View File

@ -1,3 +1,15 @@
$(document).ready(function() {
$('.myTable').fixedHeaderTable({ tableHeight: '350', hasFooter: true });
});
$('.myTable, .myOtherTable').fixedHeaderTable({ tableHeight: '350', hasFooter: true, autoShow: false });
$('.myOtherTable').fixedHeaderTable('show');
setTimeout(showMyTable, 5000);
setTimeout(hideMyTable, 8000);
});
showMyTable = function() {
$('.myTable').fixedHeaderTable('show');
}
hideMyTable = function() {
$('.myTable').fixedHeaderTable('destroy');
}

39
jquery.fixedheadertable.js
View File

@ -10,7 +10,8 @@
// plugin's default options
var defaults = {
autoShow: true,
loader: false,
hasFooter: false,
colBorder: true,
@ -128,21 +129,47 @@
});
}
} else {
return self;
if ( !settings.autoShow ) {
$wrapper.hide();
}
}
return self;
},
show: function() {
var $self = $(this),
self = this;
$self.closest('.fht-table-wrapper')
.show();
return this;
},
hide: function() {
var $self = $(this),
self = this;
$self.closest('.fht-table-wrapper')
.hide();
return this;
},
destroy: function() {
var $self = $(this),
self = this,
$wrapper = $self.closest('.fht-table-wrapper');
$self.insertBefore($wrapper)
.removeAttr('style')
.append($wrapper.find('tfoot'))
.removeClass('fht-table');
$wrapper.remove();
return this;
}

153
test.html
View File

@ -162,5 +162,158 @@
</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>