'Phantom Table' appearing when "left" is set to true
'Phantom Table' appearing when "left" is set to true
Duac246
Posts: 10Questions: 0Answers: 0
I am trying to make use of the FixedHeader plugin, and I cannot get the leftmost column to be fixed as it is when I am scrolling horizontally. Instead, what I get when I set "left" to true in the FixedHeader parameters is a temporary phantom table. Again, it is likely to be some small, obvious error, but I cannot see it. Here I have part of my redone table.html code. It currently has a dummy table in it. With the line 38 commented out, the table seems functional to me (aka it has a fixed header). Yet when I try to also make the left column fixed by uncommenting line 38, two tables temporarily appear on my site (both Safari and Firefox). Here is a link: http://tweetpluck.com/table.html
And here is the code:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
@import "demo_table.css";
th, td
{
font: 80%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
height: 30px;
text-align: center;
}
.FixedHeader_Cloned th
{
background-color: white;
border-bottom: 1px solid black;
}
.left_cell
{
background-color: white;
border-right: 1px solid black;
}
$(document).ready( function () {
var oTable = $('.tablesorter').dataTable( {
"bFilter": false,
"bInfo": false,
"bPaginate": false,
} );
new FixedHeader(
oTable
, { "left": true } //here lies the problem: the line that can be commented out for a functional fixed header.
);
} );
Table Cell
[...]
Table Cell
Table Cell
[/code]
Just want to also let you know that I love this software, and will donate to it as soon as I pay off my bills for the semester!
And here is the code:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
@import "demo_table.css";
th, td
{
font: 80%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
height: 30px;
text-align: center;
}
.FixedHeader_Cloned th
{
background-color: white;
border-bottom: 1px solid black;
}
.left_cell
{
background-color: white;
border-right: 1px solid black;
}
$(document).ready( function () {
var oTable = $('.tablesorter').dataTable( {
"bFilter": false,
"bInfo": false,
"bPaginate": false,
} );
new FixedHeader(
oTable
, { "left": true } //here lies the problem: the line that can be commented out for a functional fixed header.
);
} );
Table Cell
[...]
Table Cell
Table Cell
[/code]
Just want to also let you know that I love this software, and will donate to it as soon as I pay off my bills for the semester!
This discussion has been closed.
Replies
Great to hear that DataTables and FixedHeader are going down well :-).
You've found a bug in FixedHeader here... The problem is that when fixing the left or right column, FixedHeader was assuming that there was a tfoot element - which in the case above there wasn't, thus it was throwing a JS error. I've fixed this problem now and you can grab the latest version from http://github.com/DataTables/FixedHeader/blob/master/js/FixedHeader.js
Thanks for flagging the issue up!
Regards,
Allan
Regarding the onmouseover - this is a result of the clone() which is done on the elements for the 'fixed' column. Unfortunately DOM0 events are not copied (why - I can't say - a quirk of the DOM no doubt...), but if you were to use jQuery events rather than DOM0, then it should work okay, as they are copied over (as can be seen by the sorting).
Allan
Thanks for all your help so far.
In the process of using jQuery events instead of DOM0, like you suggested, I have made a jQuery function that should alert "hey:" when I hover over a td with an id of checkboxCell. All the first cells in every row (with the exception of the first) have such an id. The appropriate table (with the attached jQuery script) is on this site: http://tweetpluck.com/table2.html
And the appropriate function (as you can see in the page source code) is
[code]
$(document).ready
(
function()
{
$('#checkboxCell').mouseenter
(
function()
{
alert("hey:");
}
);
}
);
[/code]
The problem, as you can tell, is that only the row with the 1st checkboxCell, one with the P_ID of 1, is actually executing the alert. I have tried using the each() command between the $('#checkboxCell') and the mouseenter command, thinking that mouseenter maybe was a method that only applied to the first of the selector set, but to no avail.
Do you have any ideas why this mouseenter command is working in this way?
Allan
The only problem is that, just like in DOM0 events, it doesn't work in cases where the left is set to true (eg when the table has a fixed column), which is why I converted the event to jQuery in the first place. Check it out: http://tweetpluck.com/table2.html
The only different between the two is that the following line has been uncommented out in the latter website:
[code]
, { "left": true } //the line for a functional fixed column.
[/code]
By the way, here is the jQuery function I use right now to select the hovering mouse:
[code]
$(document).ready
(
function()
{
$("td[name='checkboxCell']").mouseenter
(
function()
{
invertCheck($(this).children("input").attr("id"));
}
);
}
);
[/code]
Sorry to post here so often--you've just been a great help, and I can't wait for this thing to work! :)
[code]
$(document).ready
(
function ()
{
$("td[name='checkboxCell']").mouseenter
(
function()
{
invertCheck($(this).children("input").attr("id"));
}
);
var oTable = $('.tbl').dataTable( {
"bFilter": false,
"bInfo": false,
"bPaginate": false
} );
new FixedHeader
(
oTable
, { "left": true } //the line that is commented out for a functional fixed header.
);
}
);
[/code]
One other tool you might be interested in is my Visual Event: http://www.sprymedia.co.uk/article/Visual+Event . It lets you see what elements have events attached to them visually - which is helpful when debugging this kind of thing.
Allan
Unfortunately, as you can see, the problem remains!
For your reference, http://tweetpluck.com/table3.html has the same table as above (with your code) with "left" no longer set to true.
I do like your Visual Event bookmarklet; it is proving useful in development. Yet I cannot find anything yet. It seems that the P_ID column has my mouseenter event on it, but Visual Event doesn't tell me if it is underneath (on the real column) or on the cloned column. I am quite sure it is only on the real column, and I still have no idea why.
[code]
function invertCheck(element)
{
if($(this).is(':checked'))
{
$(this).attr('checked', false);
}
else
{
$(this).attr('checked', true);
}
}
$(document).ready
(
function ()
{
$("td[name='checkboxCell']").mouseenter
(
function()
{
invertCheck($('input', this)[0]);
}
);
var oTable = $('.tbl').dataTable( {
"bFilter": false,
"bInfo": false,
"bPaginate": false
} );
new FixedHeader
(
oTable
, { "left": true } //the line that is commented out for a functional fixed header.
);
}
);
[/code]
Allan
Nothing has happened to my knowledge. Just curious--why did you think this was a step in the right direction?
[code]
function invertCheck(element)
{
if($(element).is(':checked'))
{
$(element).attr('checked', false);
}
else
{
$(element).attr('checked', true);
}
}
$(document).ready
(
function ()
{
$("td[name='checkboxCell']").live
(
'mouseenter',
function()
{
//invertCheck($(this).children("input").attr("id"));
invertCheck($('input', this)[0]);
}
);
var oTable = $('#example').dataTable( {
"bFilter": false,
"bInfo": false,
"bPaginate": false
} );
new FixedHeader
(
oTable
, { "left": true } //the line that is commented out for a functional fixed header.
);
}
);
[/code]
The real trick comes now, given that you have two input boxes - the original ones in the table, and the ones in the fixed column. Depends what you want to do with them, how you deal with this. But this should get you going hopefully.
Allan