Fixed Column javascript error

Fixed Column javascript error

jnorrisjnorris Posts: 25Questions: 0Answers: 0
edited September 2011 in General
Hi All,

I'm trying to use the FixedColumns feature and have issues when using it with other features such as the ColVis extra or with sorting enabled. This is happening with DataTables 1.8.2, FixedColumns 2.0.1, jQuery 1.6.2. This line at 884

[code]
$('>tfoot th:eq('+iIndex+')', oClone.footer)[0].className =
this.s.dt.aoColumns[ aiColumns[iIndex] ].nTf.className;
[/code]

produces the error "'0' is null or not an object" each time a column is sorted or has the visibility checkbox changed.

I have a small table (6 rows/9 columns) which includes a footer with data.

I also noticed that the horizontal scroll bar is inserted between the body and footer. Is there a way to get the scroll bar to appear beneath the footer instead?

Thanks,
Jim

Replies

  • jnorrisjnorris Posts: 25Questions: 0Answers: 0
    The error occurs in IE8, does not occur in FF7.

    I also found that In FF when hiding a column causes the horizontal scroll bar to go away, the footer elements that are under the fixed columns are not moved up like the ones that are under the scrollable area.
  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin
    Might you be able to give us a link to the page which is having this problem please? Also - does your tfoot contain exactly the same number of TH elements are there are columns, or have you got something else?

    Allan
  • jnorrisjnorris Posts: 25Questions: 0Answers: 0
    I don't have a link but the code below reproduces both the error and footer issues in IE and FF.

    Jim

    [code]
    <!DOCTYPE html>














    C1
    C2
    C3
    C4
    C5
    C6
    C7
    C8
    C9




    Totals:
    0%
    0%
    0%
    0%
    0%
    0%
    0%
    0%




    000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000


    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111


    222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222





    var oTable;
    $( function()
    {
    oTable = $( '#aTable' ).dataTable({
    "sScrollX": "100%",
    "bScrollCollapse": true,
    "sDom": 'C<"clear">t',
    "oColVis": { "aiExclude": [ 0, 1 ], "sAlign": "right" }
    });
    new FixedColumns( oTable, { "iLeftColumns": 2 } );
    });



    [/code]
  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin
    The selector that you pointed out the break is occurring on is specifically looking for TH elements in the footer - of which you have none, so suspect this isn't hugely surprising that it isn't working. If you change the TD to TH elements in the TFOOT does it spring into life?

    It sounds like that little constraint in FixedColumns needs to be relaxed a bit.

    Allan
  • jnorrisjnorris Posts: 25Questions: 0Answers: 0
    Thanks for looking at this issue Allan. I've always seen TD's shown in TFOOT elements and assumed that is the correct tag to use, but you are right, using TH's fixes the error.

    Thanks again,
    Jim
  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin
    TDs and THs are both valid. The TH is a "header" (in the footer :-) ), which is what I typically use, but I do think I should relax this constraint in FixedColumns. Thanks for the heads up on this!

    Good to hear the work around does the job for now though!

    Regards,
    Allan
This discussion has been closed.