markmalek / fixed-header-table

jQuery plugin for tables with fixed headers

Version 1.3

• jquery.fixedheadertable.js

Methods:

• show - $('selector').fixedHeaderTable('show');
• hide - $('selector').fixedHeaderTable('hide');
• destroy - $('selector').fixedHeaderTable('destroy');

Options:

• width - Number - Default: 100%
• height - Number - Default: 100%
• fixedColumns - Number - Default: 0
• footer - Boolean - Default: false
• cloneHeadToFoot - Boolean - Default: false
• autoShow - Boolean - Default: true
• altClass - String - Default: none
• themeClass - String - Default: none

Notes:

If you aren't using the minified version, be sure to include lib/jquery.mousewheel.js in your page if you require mousewheel scrolling via fixed columns.

fixed-header-table's Issues

First two columns fixed

Possible to force the plugin to lock the first two columns?

Let me know.

Thanks

Issue with AJAX and and Fixed-Header-Table

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});
});
}

table is expanding past the right edge of jquery tab

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:

<script> $(function() { $( "#begining" ).datepicker({ dateFormat: 'yy-mm-dd' }); $( "#end" ).datepicker({ dateFormat: 'yy-mm-dd' }); $('#instats').fixedHeaderTable({ width: '100%', height: '250', footer: false, cloneHeadToFoot: false, altClass: 'odd', themeClass: 'fancyTable',autoShow: false }); $('#instats').fixedHeaderTable('show', 700); //$( "#add_remid" ).button(); }); </script>

               <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>

fixedColumn:true doesn't work with rowspan

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.

Freeze N columns

Would it be possible to freeze more than one column. Say the leftmost three columns?

Compatibility with dynamically adding thead row and tbody rows

Hi, great pluggin! Maybe just me, but didn't seem to work correctly when all rows in the table are added via jquery.

Table Row Style

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.

fix the row height and column width

Hi

the table records are generated dynamically. how to fix the row height and column width

1.3 second row on thead fixedColumn

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.

Fixed Colums on large datasets causing performance issues

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.

Adding Form Elements in Table

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

Error

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"

Multiple Tables on same page

This plugin doesn't work correct for multiple tables on 1 page. Only one Table get Header and Footer.

Is it possible to put the scroll bar under the footer?

Is it possible to put the scroll bar under the footer? I guess it will be more beautiful. Thanks!

Henry

footer does not scroll horizontally

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!

Header duplicates and no fixed header

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

max-height support

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 ?

A little bug in demo

For fixing columns,

should use: fixedColumns
not: fixedColumn

I guessed the lib changed but the demo not.

Henry

fixedColumn not freezing first column, fixedColumns:2 hiding table

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});
});

height default 100% does not apply when there is fixColumns

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.

fixed header height

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?

Fixed-Header-Table inside jQuery UI accordion

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

Automatic resizing of the table.

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

support for fixed column WIDTH?

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!

browser zoom breaks table cell alignment

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.

Width Option

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
});

v1.3: fixedColumn and TH colspan

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?

Jquery ui dialog

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.

How to create a few fixed columns?

In plugins create only one fixed column. How to create a few fixed columns?

multiple table header rows and fixed column doesn't work

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)

Usage Question

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

Which browsers are supported?

having trouble with footer setup

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.

table alignment issue

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

Table scrolling is not working for me

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.

performances

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

Whitespace in code

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.

Altered Markup on Column Sort

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.

1. Unchecked checkboxes become checked again after a column sort. It does not necessarily have to be the sort of the column in which they are contained, but any column.
2. Tooltips (set as the title attribute on the td element) for truncated text are wiped away after a sort. Checking the code shows that the tableToObject() function only accounts for the html contents of a element but not any of its attributes (like title).

Error on http://fixedheadertable.com/

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!

"build table" on your website does not work

The "build table" button doesn't react, might be a bug

1. Setting the border colour ,style 2. In IE 7 , security warnig 3. how to fix the column width

1. table.tablename {
   border-spacing: 0px;
   margin: 50px;
   border-color: gray;
   border-style: groove;
   border-width: 25px;

}
td.table {

border-color: gray;
border-style: ridge;
border-width: 1px;

}
i am not able fix the border properly........

1. in IE7 security warning shown when i use the fixed column header plugin. how to eradicate this without warning
2. the table data is generated dynamically... how to fix the column width so that UI looks fine
   }

Horizontal scrolling with multiple tables per page only works for first table

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.

On some rows the "td"-s seem to be translated

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

How to assign the scroll position while page post back?

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

Error $self.closest is not a function

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('

');
}
$wrapper = $self.closest('.fht-table-wrapper');

Thanks,
Priyanka

Cannot build table in demo

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:

https://github.com/api/v2/json/commits/list/golovko/Fixed-Header-Table/master?callback=jQuery15207365378092508763_1340246203600&_=1340246203633

Integration with tablesorter

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:

• Fix fixedheadertable to behave correctly if tablesorter is loaded first and has already "mangled" a table.
• Fix tablesorter to behave correctly if fixedheadertable is loaded first and has already "mangled" a table.

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.

Cell title value removed - loading panel - performance tweaks?

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

Header with Multiple Rows

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?

THeader and TBody width not matching

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 :-)