DataTable with FixedHeader and Thickbox in IE7
DataTable with FixedHeader and Thickbox in IE7
danideidea
Posts: 6Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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
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