Fixed Left Column not working using Fixed Header Extra

Fixed Left Column not working using Fixed Header Extra

scd1982scd1982 Posts: 6Questions: 0Answers: 0
edited September 2013 in DataTables 1.9
I'm unable to provide a link to the actual webpage that I'm using as it's behind a password protected directory, and contains sensitive data that I don't want to make available to prying eyes.

A working example that illustrates the same issue I am having can be found here: http://live.datatables.net/eyejag

What I would like to have happen is have the header row and the first (left) column fixed. However, as you can see in the example only the header row is fixed.

I believe I followed the options correctly for the FixedHeader: http://datatables.net/extras/fixedheader/options

[code]$(document).ready( function () {
var oTable = $('#schedule').dataTable( {
"sScrollY": "500px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bFilter": false,
"bSort": false,
"bInfo": false,
"bPaginate": false
} );
new FixedHeader( oTable, { "left": true } );
} );[/code]

I also get the error message "FixedHeader 2 is not supported with DataTables' scrolling mode at this time"

Does this error mean that fixing the top row and left column is not possible?

Also, I'm using DataTables 1.9.4 and FixedHeader 2.0.6

Replies

  • scd1982scd1982 Posts: 6Questions: 0Answers: 0
    OK, silly mistake on my part. I changed the [code]new FixedHeader( oTable, { "left": true } );[/code] to [code]new FixedHeader( oTable );
    new FixedColumns( oTable );[/code]
    This enabled the fixed head/column effect I was looking for. However I still get the error message "FixedHeader 2 is not supported with DataTables scrolling mode at this time"
    I don't understand why the error message comes up. The table otherwise displays exactly the way I want it to??
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    The error message means exactly what it says - you cannot use sScrollX / sScrollY and FixedHeader at the same time.

    Allan
  • scd1982scd1982 Posts: 6Questions: 0Answers: 0
    I managed to get the following to display the way I wanted it to.
    [code]
    $(document).ready( function () {
    var oTable = $('#schedule').dataTable( {
    "sScrollY": "500px",
    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bFilter": false,
    "bSort": false,
    "bInfo": false,
    "bPaginate": false
    } );
    new FixedHeader( oTable );
    new FixedColumns( oTable );
    } );[/code]
    The only problem I had with it was the message I mentioned that popped up. Removing lines 155-159 in FixedHeader.js got rid of the alert (didn't really seem to be doing anything crucial to the program other than telling me that something wasn't working).
    Lines 155-159:
    [code]if ( oDtSettings.oScroll.sX != "" || oDtSettings.oScroll.sY != "" )
    {
    alert( "FixedHeader 2 is not supported with DataTables' scrolling mode at this time" );
    return;
    }[/code]
    However, with a fresh set of eyes I looked at it again, and simply removed the [code]new FixedHeader( oTable );[/code] line in my code above and replaced the alert message in FixedHeader.js. It appears to have the exact same functionality.
    Thanks for your help.
This discussion has been closed.