Filtering/Pagination not displayed in IE8 or IE8 Compatability mode

jon.bluks

Hi,

I'm having a problem in IE8 and IE8 Compatability mode: My datatables isn't displaying the filtering/pagination divs.

They display in FireFox, e.g.:





Showing 1 to 25 of 11228 entries



But In IE8, the datatable renders as:




It seems to render the same whether the compatability mode is enabled/disabled.

Anybody have any thoughts or suggestions?

Jonathan

allan

Hi Jonathan,

Could you check that you are using DataTables 1.5.6 please? 1.5.5 has a few issues with IE... Failing that, any chance of a link showing the problem?

Thanks,
Allan

jon.bluks

Hey Allan,

On the same wavelength...I realized this morning that I was using 1.5.5 and updated. Now the problem's kind of reversed. The pagination and filtering are displayed, but the results in the table are not. The rows are in the dom,
and the page shows a huge blank space where the results are, but they are not displayed.

OS: Vista 64 Bit
Browser: IE8/IE8 Compatability Mode

Things work great in FireFox...

Any other thoughts?

Thanks for the great work and speedy response,

Jonathan

allan

Hi Jonathan,

Are you using Ajax source, or server-side processing? The fact that there is no data displaying, but the elements are correctly added, suggests either a Javascript error, or that the data is being inserted (or returned) with a format not expected by DataTables.

Could you post your initialisation code and a sample of the data that is being used for the table?

Regards,
Allan

jon.bluks

Hey Allan,

I'm using server-side processing and returning JSON.

Here's the initialization:

[code]
searchTable = $("#SearchTable").dataTable({
"aaSorting": [[1, "asc"]],
"iDisplayLength": 50,
"bServerSide": true,
"bAutoWidth": true,
"sAjaxSource": "Search/SearchAction.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name" : "EntryFromDate", "value" : $('#EntryFromDate').val() } );
aoData.push( { "name" : "EntryToDate", "value" : $('#EntryToDate').val() } );
/* SNIPPED THE REST OF THE PARAMETERS THAT ARE PASSED TO THE SERVER */
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});
},
"fnDrawCallback": function() {
$("#SearchTable tbody tr td:first-child").attr("nowrap", "nowrap");
$("#SearchTable tbody tr td:first-child").attr("class", "ActionCell");
$.unblockUI();
}
});
[/code]

Here is the DOM that IE has after the search is returned. The JSON I think is fine, because the information is in the DOM and the table is created, but, for some reason, the table isn't seen.

[code]


Show 102550100 entries
Search:



 
First Name
Last Name
Address
Phone
Email
Pimary Relationship


View | Edit | Delete
AAATEST
AAATEST



Industry
Showing 1 to 1 of 1 entries



[/code]

allan

Hi Jonathan,

Interesting - it does look like everything is okay in the DOM there... I've recently had a conversation with someone else who was having problems with the table simply not being visible on the page, but it was obviously in the DOM. I wonder if it's the same issue...

The issue there was with the "position: relative" style on the "datatables_wrapper" element (it's in my demo CSS files). Removing that attribute allowed the table to be displayed as expected. Given that it sounds so similar, perhaps worth giving this a go.

Regards,
Allan

jon.bluks

ahhhh (breathing a sigh of relief)

Thanks Allan, that did the trick!

Jonathan

suwidadi

Hi Alan,
i have similar problem on a page i built but in another page the code is fine. its already in the DOM. but failed to display. and i have deleted the css attribute you mention above. any idea ? thanks..

allan

You'll need to give us a bit more information than that. Ideally a link.

Allan

suwidadi

Oops... My Bad, it was cached page on my ie browser. after restart i found out that your css attribute is solution is working just fine. thanks.

leviluo

it was cached page on my ie browser~~~ just as you say, oh my god~~ thanks~~