Skip to content

Instantly share code, notes, and snippets.

@straydogstudio

straydogstudio/README.txt

Forked from flaviaza/README.txt
Last active January 6, 2021 00:30
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save straydogstudio/5921932 to your computer and use it in GitHub Desktop.
Save straydogstudio/5921932 to your computer and use it in GitHub Desktop.
Download ZIP
A jQuery fixed header table implementation. Designed to work with Bootstrap, but should work generally.
Raw
README.txt
Here is a simple jQuery plugin to make a table header fixed on top of a div when this is scrolled.
Using the code from twitter bootstrap documentation page, this code is customized for table header.
Create the table with the table-fixed-header class and a thead tag:
<table class="table table-striped table-fixed-header" id="mytable">
<thead class="header">
<tr>
<th>Email Address</th>
<th>First Name</th>
<th>Last Name</th>
<th>Administrator</th>
</tr>
</thead>
<tbody>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
...
</tbody>
</table>
Add the css from the file "table-fixed-header.css" You need to assign a height value to
".table-content" into the css.
To apply it to above table, call the following:
$(document).ready(function(){
$('.table-fixed-header').prepFixedHeader().fixedHeader();
});
To avoid prepFixedHeader, wrap the table with <div class="row fixed-table"><div class="table-content">...
</div></div> ahead of time.
If you have images in your table, running fixedHeader() on document.ready may cause layout problems,
since the layout may change once images are loaded. In that case, call fixedHeader() on document.load:
$(document).ready(function(){
$('.table-fixed-header').prepFixedHeader();
});
$(document).load(function(){
$('.table-fixed-header').fixedHeader();
});
Raw
sample.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table Fixed Header</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!-- CSS and JS for table fixed header -->
<link rel="stylesheet" href="table-fixed-header.css">
<script src="table-fixed-header.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1>Table Fixed Header</h1>
</div>
<table class="table table-striped table-fixed-header" id="mytable">
<thead class="header">
<tr>
<th>Email Address</th>
<th>First Name</th>
<th>Last Name</th>
<th>Administrator</th>
</tr>
</thead>
<tbody>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>admin@fakeadress.com</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
</tbody>
</table>
</div>
<script language="javascript" type="text/javascript" >
$(document).ready(function(){
// add 30 more rows to the table
var row = $('table#mytable > tbody > tr:first');
for (i=0; i<0; i++) {
$('table#mytable > tbody').append(row.clone());
}
// make the header fixed on scroll
$('.table-fixed-header').prepFixedHeader().fixedHeader();
});
</script>
</body>
</html>
Raw
table-fixed-header.css
.fixed-table {
display: block;
position: relative;
}
.fixed-table .table-content {
display: block;
position: relative;
height: 500px; /*FIX THE HEIGHT YOU NEED*/
overflow-y: auto;
}
.fixed-table .table-copy, .fixed-table .header-copy {
position: absolute;
top: 0;
left: 0;
z-index: 1020;
background-color:#fff;
}
Raw
table-fixed-header.js
(function($) {
$.fn.prepFixedHeader = function () {
return this.each( function() {
$(this).wrap('<div class="row fixed-table"><div class="table-content"></div></div>');
});
};
$.fn.fixedHeader = function () {
return this.each( function() {
var o = $(this),
nhead = o.closest('.fixed-table'),
$head = $('thead.header', o);
$(document.createElement('table'))
.addClass(o.attr('class')+' table-copy').removeClass('table-fixed-header')
.appendTo(nhead)
.html($head.clone().removeClass('header').addClass('header-copy header-fixed'));
var ww = [];
o.find('thead.header > tr:first > th').each(function (i, h){
ww.push($(h).width());
});
$.each(ww, function (i, w){
nhead.find('thead.header > tr > th:eq('+i+'), thead.header-copy > tr > th:eq('+i+')').css({width: w});
});
nhead.find('thead.header-copy').css({ margin:'0 auto',
width: o.width()});
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment