Filtering/Pagination not displayed in IE8 or IE8 Compatability mode
Filtering/Pagination not displayed in IE8 or IE8 Compatability mode
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
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
This discussion has been closed.
Replies
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
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
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
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]
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
Thanks Allan, that did the trick!
Jonathan
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