DataTable with FixedHeader and Thickbox in IE7

DataTable with FixedHeader and Thickbox in IE7

danideideadanideidea Posts: 6Questions: 0Answers: 0
edited March 2010 in Bug reports
Hi Alan,

I'm making a call to a Thickbox that opens a html page which contains a DataTable with a FixedHeader on it. Here's the sample:

$(document).ready(function() {
fnFeaturesInit();

var oTable = $('#example').dataTable({
"oLanguage": {
"sUrl": "language/esp.txt"
},
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sWidth": "30%" }, null
]
});

new FixedHeader( oTable );
});

function fnFeaturesInit () {
$('ul.limit_length>li').each( function(i) {
if ( i > 9 ) {
this.style.display = 'none';
}
});

$('ul.limit_length').append( 'Show more<\/li>' );
$('ul.limit_length li.css_link').click(function() {
$('ul.limit_length li').each( function(i) {
if ( i > 5 ) {
this.style.display = 'list-item';
}
});
$('ul.limit_length li.css_link').css( 'display', 'none' );
});
}

It works fine in IE8, but it doesn't in IE7.

Regards and great job.

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    In what way does it not work? A JS error - or a silent fail? I don't have an IE7 machine to hand so can't test this at the moment, but FixedHeader should work with IE6 and IE7.

    Allan
  • danideideadanideidea Posts: 6Questions: 0Answers: 0
    Hi again Allan,

    FixedHeader works in IE7 as you said. But the problem is when I use it inside a Thickbox doesn't fix anything in the first load. The weird thing is that if you refresh the thickbox once is loaded, the fixedHeader works fine this time.

    Thanks for your time.
    Dani
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Sounds very odd indeed! And this only happens in IE7? Perhaps it's missing an event handler or something... Unfortunately I don't have an IE7 machine which is easy to get access to - but if you could put up and example that would be very useful.

    Allan
  • danideideadanideidea Posts: 6Questions: 0Answers: 0
    Hi Allan,

    if you have IE8, you could prove it with button's compatibility view accessing through IIS.

    Anyway, there's an example:

    1 - from a html archive, we make the call to another html through thickbox:

     

    This code opens a thickbox with client.html page on it. This is the one which has datatable and fixedheader.

    2 - client.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Clientes










    .style1 {
    font-size: 16px;
    font-weight: bold;
    }

    .dataTables_info {
    PADDING-TOP: 0px
    }
    .dataTables_paginate {
    PADDING-TOP: 0px
    }
    .css_right {
    FLOAT: right
    }
    #example_wrapper .fg-toolbar {
    FONT-SIZE: 10px;
    }
    #theme_links SPAN {
    PADDING-BOTTOM: 2px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FLOAT: left; PADDING-TOP: 2px
    }
    .FixedHeader_Cloned th { BORDER-BOTTOM: #aaaaaa 1px solid; BORDER-LEFT: #aaaaaa 1px solid;
    BACKGROUND: url(../images/ui-bg_highlight-soft_75_cccccc_1x100.png) #cccccc repeat-x 50% 50%; COLOR: #222222; BORDER-TOP: #aaaaaa 1px solid;
    FONT-WEIGHT: bold; BORDER-RIGHT: #aaaaaa 1px solid; width:30%; }

    /*#datatable {
    position: relative;
    }

    thead tr {
    position: absolute;
    top: expression(this.offsetParent.scrollTop);
    }*/



    $(document).ready(function() {
    fnFeaturesInit();

    var oTable = $('#examplecl').dataTable({
    "oLanguage": {
    "sUrl": "language/esp.txt"
    },
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "aoColumns": [
    { "sWidth": "30%" }, null
    ]
    });

    new FixedHeader( oTable );
    });

    function fnFeaturesInit () {
    $('ul.limit_length>li').each( function(i) {
    if ( i > 9 ) {
    this.style.display = 'none';
    }
    });

    $('ul.limit_length').append( 'Show more<\/li>' );
    $('ul.limit_length li.css_link').click(function() {
    $('ul.limit_length li').each( function(i) {
    if ( i > 5 ) {
    this.style.display = 'list-item';
    }
    });
    $('ul.limit_length li.css_link').css( 'display', 'none' );
    });
    }









    Client number
    Client




    Client_1
    Number_Client_1


    Client_2
    Number_Client_2

    ....

    Client_26
    Number_Client_26








    Anyway, you can prove it with any of your examples while you first do the call from another html through thickbox, as I show you in point #1.

    Thanks for your efforts.
    Dani
This discussion has been closed.