markmalek / fixed-header-table Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin for tables with fixed headers
Home Page: www.fixedheadertable.com
License: MIT License
jQuery plugin for tables with fixed headers
Home Page: www.fixedheadertable.com
License: MIT License
For tables that require horizontal scrollbars, the footer does not scroll with the body (unless it is cloned from the header). The _bindScroll
function just needs to check for a footer as well as a cloned footer:
if (settings.cloneHeadToFoot) { ...
needs to be changed to:
if (settings.footer || settings.cloneHeadToFoot) { ...
For consistency, you may want to check explicitely for boolean values -- like this line near the end of _setupFixedColumn
:
if (settings.footer == true || settings.cloneHeadToFoot == true) { ...
Thanks for the good work!
This plugin doesn't work correct for multiple tables on 1 page. Only one Table get Header and Footer.
To reproduce, edit demo.js and add fixedColumns:1, to fixedHeaderTable() call
Then replace the part in the buildTable function that builds table headers to build two rows of table headers:
$currentRow = $('<tr></tr>').appendTo($thead);
for ( var column = 1; column <= columns; column++ ) {
$currentRow.append('<th>Column '+column+'</th>');
}
$currentRow = $('<tr></tr>').appendTo($thead);
for ( var column = 1; column <= columns; column++ ) {
$currentRow.append('<th>Head 2 '+column+'</th>');
}
Then load up demo.html and enter any numbers of rows/columns (e.g. 4 and 4), then hit Build Table and Run Plugin and you will see that the second table header row in the fixed column is missing. I will attach a screenshot (if possible)
Hi,
I am using your fixed header table. Once I integrate this in my application I am getting the java script error saying
$self.closest is not a function at line 94 in jquery.fixedheadertable file.
if (!$self.closest('.fht-table-wrapper').length) {
$self.addClass('fht-table');
$self.wrap('
Thanks,
Priyanka
}
td.table {
border-color: gray;
border-style: ridge;
border-width: 1px;
}
i am not able fix the border properly........
When trying to build a table in the demo section of your homepage, nothing shows up.
This may be because the following file isn't found when the page is loaded:
Would it be possible to freeze more than one column. Say the leftmost three columns?
I am using your control inside of a form (called "formx"). Prior to adding the form my javascript worked that parsed a column of data values entered. Now it is broken. I have narrowed it down to the trivial addition of the class name "myTable01". I see in Firebug where a whole set of new names are added. However, being new to Javascript, I am not sure which name to pick up.
Here is a snippet of code that references the form.
lbl= eval("formx.pending" + alpay[k] + ".value");
I need to change formx.????.pending correct? But what
I apprecitate your time looking at this
Nothing seems to happen when I use this:
$('#result_list').fixedHeaderTable({ footer: false, cloneHeadToFoot: false, fixedColumn: true});
And when I use this, the table dissapears :-(
$('#result_list').fixedHeaderTable({ footer: false, cloneHeadToFoot: false, fixedColumns: 2});
I can send you my HTML. I'll paste the pertinent parts below:
Head section:
<head>
<title>Select Virus Prep. to change | Virus Tracker Site Admin</title>
<link rel="stylesheet" type="text/css" href="/media/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="/media/admin/css/changelists.css" />
<link rel="stylesheet" type="text/css" href="/media/admin/css/forms.css" />
<script type="text/javascript" src="/admin/jsi18n/"></script>
<link href="/media/fixed_header_table/css/defaultTheme.css" type="text/css" media="all" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/media/janelia_admin.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/media/admin/css/ie.css" /><![endif]-->
<script type="text/javascript">window.__admin_media_prefix__ = "/media/admin/";</script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
<script type="text/javascript" src="/media/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/media/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/media/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/media/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/media/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/media/list_filter_collapse.js"></script>
<script type="text/javascript" src="/media/decimal_to_sci_not.js"></script>
<script type="text/javascript" src="/media/fixed_header_table/lib/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/media/fixed_header_table/jquery.fixedheadertable.min.js"></script>
<script type="text/javascript" src="/media/freeze_cols.js"></script>
<script type="text/javascript" src="/media/admin/js/calendar.js"></script>
<script type="text/javascript" src="/media/admin/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function($) {
$("tr input.action-select").actions();
});
})(django.jQuery);
</script>
<meta name="robots" content="NONE,NOARCHIVE" />
</head>
Table is formatted like this:
<table cellspacing="0" id="result_list">
<thead>
<tr>
<th>...</th>
...
</tr>
</thead>
<tbody>
<tr>...</tr>
...
</tbody>
</table>
freeze_cols.js contains:
$(document).ready( function () {
$('#result_list').fixedHeaderTable({ footer: false, cloneHeadToFoot: false,
fixedColumn: true});
});
The "build table" button doesn't react, might be a bug
I have it all working but it's not scrolling. any time i change the height it does not affect the table. tried 10, 50, 150. width works just fine. I would assume thats why the table is not scrollable.
Hi!
You're a hard man to contact... sorry for using this github thread to report the jQuery issue.
There's an error on the webpage for the jQuery plugin (same in FF) which I believe is stopping the table from being built. =( :
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Tue, 14 Aug 2012 07:46:09 UTC
Message: Unable to get value of the property 'split': object is null or undefined
Line: 250
Char: 3
Code: 0
URI: http://fixedheadertable.com/js/fixedheadertable.js
Sorry for posting here!
Is there a way to fix only the height of the top header element?
in the docs height specifies:
" height: When height is set the table thead, tbody, and optional tfoot will be equal to the height value. Height is in pixels. "
is there a way to set the height of the thead only?
var defaults = {
width: '100%',
height: '100%',
themeClass: 'fht-default',
borderCollapse: true,
fixedColumn: true, // fixed first column
sortable: false,
autoShow: true, // hide table after its created
footer: false, // show footer
cloneHeadToFoot: false, // clone head and use as footer
autoResize: false, // resize table if its parent wrapper changes size
create: null // callback after plugin completes
}
<thead>
<tr>
<th>Row 1 Column 1</th>
<th>Row 1 Column 2<th>
</tr>
<tr>
<th>Row 2 Column 1</th>
<th>Row 2 Column 2</th>
</tr>
</thead>
In the above Row 2 Column 1 disappears. This throws off all the rows.
In plugins create only one fixed column. How to create a few fixed columns?
Hi, great pluggin! Maybe just me, but didn't seem to work correctly when all rows in the table are added via jquery.
Hi!
I'm using your great plugin with a table I build dynamically from a database.
All works nicely except if I populate the cells with input type="text"... objects, then basically the width of the columns of the header doesn't match anymore the width of the body of the table and the layout appears all "skewed".
Any idea how can I fix this?
Thanks and please, forgive my bad english :-)
Hi Mark,
First of all - amazing job. The table looks and work perfectly for me.
I am trying to add a column with checkboxes in it so that I can select entries from the table and then click on some action buttons outside of the table to re-load the page with various parameters, filters, etc. implemented.
For example, right now I have something like this as a table element:
<TR><TD><input size="5" name="foo">foobar</TD><TD><INPUT
TYPE="checkbox" name="protein_selected[]" value="IPI:IPI00002520.1"></TD>......other
table data.....</TR>
When I select a checkbox and then click on an action, the value is not being passed along. Any thoughts? I am a bit of a novice with this stuff so maybe I am missing something obvious. If I make the table without using the fixedheadertable, then everything works fine.
Thanks so much for any help you (or anyone else) can give me.
Best,
Mat
Hi all,
i am generating a dynamic table.
$('.tableid').fixedHeaderTable({ height: '299px',width:'970px', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
Here am fixing the height and width. Suppose i am generating a table which has less records. since i am fixing the height and width, blank white spaces are displayed. How to shrink the table if the records are less though given height and width is large
Hi golovko:
First, many thanks for the coolest and simplest fixed header and column HTML table implementation I have seen! Great job!!!
I have a big but simple table with .fixedHeaderTable, I need the function that detecting the scroll position then post it to the server while submit and then applying same scroll position while post back. It is very important for user friendly.
Could you please help to give a sample code? Thanks in advance.
Henry
I'm calling ajax request and it's returning the fixedHeaderTable with data and everything. on certain pages it extends past the right side of the jquery tab. I have tried to adjusting the width and that gives me more horizontal scrolling. this is the code that generates what is being return.
this is the ajax call:
$.ajax({
url: 'ajax_dash.php?action=emp_stats_data&beg='+begining+'&end='+end,
type: "GET",
success: function(feedback){
$('#cont').html('');
$('#cont').html(feedback);
}
});
this is what is happening at the call:
<table id="instats" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Caller</th>
<th>Leads Issued</th>
<th>Wages</th>
<th>Hours Worked</th>
<th>Lead Cost</th>
</tr>
</thead>
<tbody>
<?php
$q = "SELECT EmployeeID FROM empmain WHERE Department = 80 and Status = 'Active'";
$dResult = mysql_query($q) or die(mysql_error());
$num = mysql_num_rows($dResult);;
if ($num < 1)
{
echo "<tr><td>No Records Found</td><td></td><td></td><td></td><td></td></tr>";
}
else
{
while ($row = mysql_fetch_array($dResult))
{
$num_leads = $database->get_leads_by_date_inside_sales($row['EmployeeID'],$date_start,$date_end);
$rep = $database->GetEmpNameCell($row['EmployeeID']);
echo '<tr>';
echo "<td>$rep[EmpName]</td>";
echo "<td>$num_leads</td>";
echo "<td><input class=\"text ui-widget-content ui-corner-all\" type=\"text\" name=\"wages\" id=\"wages\" /></td>";
echo "<td><input class=\"text ui-widget-content ui-corner-all\" type=\"text\" name=\"hours\" id=\"hours\" /></td>";
echo "<td>$</td>";
echo '</tr>';
}
}
?>
</tbody>
</table>
Hi,
First of all, thanks for the fantastic work!
I found out that if I use the fixColumns, height attribute must be set or else the whole table will just disappear. You can try it on the demo .myTable04.
Any workaround? I have dynamic rows, and unfortunately I do not have the option of setting the height dynamically due to the structure of the framework I am using.
I'm using version 3.0.4. Everything is working fine except while viewing in IE 7 the data in the columns is wrapping. Inspecting with Firefox is see the following:
To make this work in IE7, I'd like to enclose this in a span tag, but I have no idea where this is being generated. Is there a way to do this? I'm not a jquery expert. Thanks.
Hi
the table records are generated dynamically. how to fix the row height and column width
Here goes my issue,
I am using a java script function to request a page in ajax (jquery). Below is an example of my code. The table itself works fine and the static header works fine along with the footer. Love it. The problem is that in my header tags (TH) I have a java script function that goes on in every TH. While this is fine and dandy on page load its a problem when I request the ajax again. It doesn't seem that my head is being reproduced and rather it is being just appended. Does anyone have this issue?
function AutoRefresh()
{
$.ajax({
url: 'pagename.html,
cache: false,
})
.done(function(data)
{
$('#TableID').html(data);
//$('#TableID').fixedHeaderTable('destroy');
$('#TableID').fixedHeaderTable({footer: true});
});
}
I have a page utilizing Jquery-UI tabs, and in each tab I have a table. All of these tables are using your plug-in, and should be horizontally scrollable (as well as vertically). The table in the first tab works as expected; however the tables in the remaining tabs have double headers (the one from the fht-head div and the one from the fht-body div), and the fht-head headers are not aligned properly with the data cells. Additionally, these subsequent tables are not horizontally scrollable. I have tested in FF12 and IE9 with the same results.
I am calling the plug-in seperately for each table, and I am using the table's id as the selector.
I am using a similar setup on another page with tables that are not horizontally scrollable and they all work fine.
Hello,
Your pluggin makes the table container taller if its content is smaller than the specified height. could you add support for max-height ? Could this max-height attribute be inherited from the parent ?
For large datas there is a mis alignment in columns. Its only reproducible in IE9. I wish I could attach screenshot so that it would be easy for debugging
For fixing columns,
should use: fixedColumns
not: fixedColumn
I guessed the lib changed but the demo not.
Henry
Please see sample here: http://jsfiddle.net/mersenneprimes/ANVNY/2/
As you can see, the header is duplicated and shifted.
I am unable to determine the cause of this.
My table is valid, I have all the thead, tbody, and th tags.
Anyone have any suggestions?
Thanks,
Ehab
Hi,
This plugin works great. Thanks.
We have some performances issue on large and complex tables, though. (Large tables are good candidates for fixed header, as you can imagine...)
Thanks for looking into it, or give us a clue so we can improve performances ourselves.
I don't how to post the HTML source (which is1.3 Mb. ) The HTML table has 106 base rows, but many rowspans and inner tables. There's something like 40 000 HTML lines. It takes around 1 minutes to be processed.
Laurent
Hello,
I have this issue: on a jsp page I wrote my html code (with one table) mixed with some scriptlets java. With Firefox (versions 11, 12) the table is perfect, the header is fixed, the columns are aligned. The table is generated with data from a db.
The problem is that with IE 9 the table comes almost perfect, too...but on some rows (usually 1 or 2 in random positions) one "td" is just translated by one position to the right so on this row there's one cell outside of the table (on the right).
It's strange that the source code of the generated page is ok.
I noticed, for example, that if there's an empty "span/span" in a "td" then this td is translated but only on one row;
if I insert an "a href" element in the span it seems to work.
If there are some empty lines between "td" and "/td" the problem comes out, too.
I hope I explained good enough.
Thanks,
A
I have a table with TH colspan='x'. When I specify fixedColumn: true
, I don't get attractive results--the scrolling content shows up behind the fixedColumn, which seems to be drawn to the width of the TH (100% of the table).
Is there a way to use this plugin with tables containing TH elements that span more than one column?
When passing a value to the width option it must be a string value or an error will be thrown.
I got the following error TypeError: Object 950 has no method 'search'
when I used the following setup script
$('#Table').fixedHeaderTable({
'fixedColumn' : true,
'footer' : true,
'height' : 450,
'width' : 950,
'autoShow' : true,
'cloneHeadToFoot' : false
});
Changing the width option to a string value fixed the issue:
$('#Table').fixedHeaderTable({
'fixedColumn' : true,
'footer' : true,
'height' : '450',
'width' : '950',
'autoShow' : true,
'cloneHeadToFoot' : false
});
Hi,
I got an issue with using your plugin in combination with the accordion of jQuery UI. I got both working alone, but as soon as I put the table inside the accordion content div your plugin does not work as intended.
It creates the fixed header but with a wrong width, also the original header is still visible. Size restrictions and themes/css are still working.
Maybe you could have a look at it or already know a workaround for that case.
Let me know if you need a sample code. I didn't include one because I think it's easier to just wrap an accordion widget around one of your own examples.
I'd rather not try a different plugin, since I like the simplicity of yours.
Kind regards,
Balthiel
Is it possible to put the scroll bar under the footer? I guess it will be more beautiful. Thanks!
Henry
Sorry about the non-specific title, but my main problem is that I cannot get your code to work. At all.
That may or may not be due to this JS Error:
"settings.width.search is not a function in .../jquery.fixedheadertable.js ... line: 83"
But that error aside, I would strongly suggest to add a basic but complete example to your documentation that serves as a starting point and a fallback for people like me who cannot get your code to work. At all.
As it is your documentation sends a terrible message: "If you cannot get this to work, you're unworthy to use it anyway"
There are two specific symptoms that occur after a column sort. It's possible that they should be split into two different issues but I figured it's more concise to lay them out at once.
Hi, thank you for this great jquery plugin...
My problem is with a jquery ui dialog. When the dialog is shown it looks good, and the fixed header is working but when I scroll to the right the header doesn't move to the right.
The reason why I'm using a jquery dialog is to give the user the possibility to see the table like in full screen.
Thank you in advance.
Go to http://fixedheadertable.com/
Generate fixed header table using 'build table' option.
Now use browser zoom. The row, column borders get misaligned.
Noticed this in chrome, IE, FF.
Your plugin is awesome, I really like it.
My only request is -- does it (and if so, how) can I get fixed column widths? I noticed that it is currently auto-resizing the columns. i.e. my table has fixed table layout and I specify the widths in my tags.
Thanks!
Possible to force the plugin to lock the first two columns?
Let me know.
Thanks
The documentation at http://fixedheadertable.com/documentation/ doesn't make very clear what one has to do to have a footer that's different from one's header. The examples at http://fixedheadertable.com/demo/multipletablesdemo.html include one that does this, but when I try to do what I think I see it doing, ie
<div id="thisIsTheBitIWantToBeTheFooter">
somestuff
</div>
.
.
.
$('.fullscreenTable').fixedHeaderTable({footer:true, footerId:'thisIsTheBitIWantToBeTheFooter'});
...I just get the div showing up as a regular block element. Is there some CSS for footer bits missing from the defaultTheme.css distributed in http://fixedheadertable.com/fixedHeaderTable.1.1.2.zip ?
Thanks very much - even without working footers, this is super useful.
Currently jquery.fixedheadertable and jquery.tablesorter do not work well together.
I'm aware of Jerome Bulanadi's Scrollable Fixed Header Table JQuery plugin, but that does not seem able to have a fixed column.
Ideally, there should be two fixes:
I do not know of a quick fix, but perhaps a starting point is to add a 'fixedheadertable' setting to tablesorter and (vice versa) so that fixedheadertable only changes the correct table based on the classes set by fixedheadertable. It seems that tablesorter has to be changed anyway, in particular if there is a fixed-column. (because it than has to sort both the div.fht-fixed-column div.fht-tbody table and the div.fht-fixed-body div.fht-tbody table.
If you use 'fixedColumn:true' and the first column in your table heading uses rowspan for formatting it doesn't display properly.
Tested in Firefox, Chrome, Opera and Safari on Mac OS X.
My table header is quite complex with three levels of heading/sub-heading/sub-sub-heading.
When displaying the first column as a fixed column it seems to treat it as if it had rowspan="1" attributed to it, mine has rowspan="3", hence the problem.
Hi,
this seems to be working really well.
However one thing is that the title tags have their values removed after the formatting, so it's left with title="".
The other thing that's been mentioned before I know, is there a way to increase loadup time? I have a large-ish table - not huge, but it's still taking some time to do the formatting.
One more thing - is there a way to show a modal 'loading' gif while it's loading?
thanks
The code could use some cleanup: the indentation mixes spaces and tabs. Most tabs seem to represent 8 spaces, but occasionally it represent 4 spaces in var definitions. I'm happy to provide a pull commit, but will wait till the current requests are pulled.
Beautiful code- thank you!
I am trying to make a table with fixed columns on a thead with several tr elements.
The _setupFixedColumn function uses $firstThChild as a single element but this finds a list instead in this case. I've adjusted the code to loop through each of the elements for sizing and to clone a new tr row for each first th to clone.
This is close to working; the sizing seems to be off for the first th elements in the original thead. Have you tried something like this yet?
When attempting to load the plug-in on a large dataset (tested on ~1200 rows) with fixed columns (tested with 2 colums fixed), javascript is taking inordinately long to complete the process. FF9.0.1 gives repeated script warnings, and IE9 just waits, up to 2 minutes. If we remove the fixed columns, the render times drop to almost nothing.
The dataset tested has 1198 rows of 12 columns. The table is ajaxed onto the page (not that it should matter). I have also tried with a dataset of ~230 rows (same columns) which is also slower than it should be but not enough to stop the JS engine.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.