'Phantom Table' appearing when "left" is set to true

'Phantom Table' appearing when "left" is set to true

Duac246Duac246 Posts: 10Questions: 0Answers: 0
edited September 2010 in FixedHeader
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!

Replies

  • allanallan Posts: 62,447Questions: 1Answers: 10,251 Site admin
    Hi Duac246,

    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
  • Duac246Duac246 Posts: 10Questions: 0Answers: 0
    edited September 2010
    Well thanks! Now, I don't know if this is a function of the changes you made, but FixedHeader also seems to be awkwardly aligned on top of DataTables. Check out http://tweetpluck.com/table2.html, a table with FixedHeaders and the left column fixed as well, and compare it to http://tweetpluck.com/table3.html, a normal DataTable. See what I mean? Also, I lose the ability to check P_ID in table2 by just hovering over the cell (but I can do this in table3) because the cloned column doesn't have the onmouseover=invertCheck( function attached to it. Why don't cloned cells copy onmouseover/ any javascript commands with them, and is there simple code I can use to make this happen?
  • allanallan Posts: 62,447Questions: 1Answers: 10,251 Site admin
    The slight misalignment is caused by the tag. If you remove that then the alignment is right. I hadn't considered the tag when writing FixedHeader to be honest, so yes, this will cause an offset... Added to the do-to list! Unless then, I'm afraid the work around is to remove the caption tag.

    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
  • Duac246Duac246 Posts: 10Questions: 0Answers: 0
    edited September 2010
    Hello 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?
  • allanallan Posts: 62,447Questions: 1Answers: 10,251 Site admin
    Having the same ID on more than one element isn't valid HTML - the ID must be unique - which is why this is being applied to only the first cell. Rather than using an ID of checkboxCell, make it a class and that should work fine.

    Allan
  • Duac246Duac246 Posts: 10Questions: 0Answers: 0
    Hmmm...when I looked at the processed table using FireBug, I found that each td already had a defined class called sorting_1 that maybe has to do with DataTables or FixedHeader. I don't want to mess up with the sorting. I will likely use the element selector or the name to make something work. Just a suggestion--make your plugins requirements excessively clear. Note, for example, that your plugin works best without a caption, that it will add a class to column td's, and that tfoot may be required so that we know what not to touch or use or add :)
  • Duac246Duac246 Posts: 10Questions: 0Answers: 0
    edited September 2010
    Due to your great advice, Allan, I have a working jQuery "hover to check" method that successfully replaces onmouseover. Great! Check it out here: http://tweetpluck.com/table3.html

    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! :)
  • allanallan Posts: 62,447Questions: 1Answers: 10,251 Site admin
    Thanks for the links - I think I know what the problem is :-). You'll need to assigned the event handlers to the table before initialising DataTables or FixedHeader for this setup - try this:

    [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
  • Duac246Duac246 Posts: 10Questions: 0Answers: 0
    edited September 2010
    Took your code and incorporated it into: http://tweetpluck.com/table2.html.

    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.
  • allanallan Posts: 62,447Questions: 1Answers: 10,251 Site admin
    I'm not certain if this will do it, but hopefully a step in the right direction:

    [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
  • Duac246Duac246 Posts: 10Questions: 0Answers: 0
    Nope. Check the site again: http://tweetpluck.com/table2.html

    Nothing has happened to my knowledge. Just curious--why did you think this was a step in the right direction?
  • allanallan Posts: 62,447Questions: 1Answers: 10,251 Site admin
    I rewrote the invertCheck function, but made a mistake... Forgot to change the 'this' to 'element' (which I think was the original problem). Doing that fires it properly. However! For some reason, jQuery wants to fire it twice... So you can use live events to over come that:

    [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
This discussion has been closed.