Datatables IE8 and sort indicator
Datatables IE8 and sort indicator
kayeng
Posts: 4Questions: 1Answers: 0
Hi,
I have a simple test page shown below (I would have posted a link to a test page, but none of the online javascript playgrounds I tried (jsfiddle, jsbin etc) seemed to support IE8).
[code]
<!DOCTYPE html>
DataTables - JS Bin
table.dataTable .sorting_asc {
background: red;
}
table.dataTable .sorting_desc {
background: blue;
}
table.dataTable {
margin: 0 auto;
clear: both;
width: 100%;
border-collapse: collapse;
border: 1px solid #CBCBCB;
font-size: 8pt;
}
table.dataTable thead tr {
background: #D8D8DA;
font-weight: bold;
text-decoration: none;
color: #000; /* header text */
border: none;
white-space: nowrap;
margin: 3px 0;
cursor: pointer;
padding: 0 18px 0 10px;
}
table.dataTable thead th {
border-bottom: 1px solid #CBCBCB;
text-align: left; /* For IE8 this needs to be specified on the th instead of the tr. See http://stackoverflow.com/questions/11321065/th-text-align-compatibility */
}
table.dataTable td, table.dataTable thead th {
border-right: 1px solid #CBCBCB;
padding: 4px 20px 4px 5px;
}
table.dataTable .even {
background-color: #F0F2F3;
}
table.dataTable .odd {
background-color: #D8DCDF;
}
Banana
1
Apple
2
Pear
3
var TestTableObject = {
"columnDefs": [{
"label": "Fruit",
"hidden": false
}, {
"label": "Test",
"hidden": true
}],
"tableID": "TestTable"
};
jQuery(document).ready(function(){
createNewDatatable(TestTableObject);
});
function createNewDatatable(enhancedTableNamespace, containerEl){
var columnInfo = [];
var currItem;
var newItem;
var datatableObject = jQuery(document.getElementById(enhancedTableNamespace.tableID));
var lastItem;
for (var index = 0; index <= enhancedTableNamespace.columnDefs.length - 1; index++) {
currItem = enhancedTableNamespace.columnDefs[index];
newItem = {};
if (currItem.label) {
newItem.sTitle = currItem.label;
}
if (currItem.hidden) {
newItem.bVisible = false;
}
columnInfo.push(newItem);
}
datatableObject.dataTable({
"sDom": "rt",
"iDisplayLength": -1,
"aoColumns": columnInfo,
"aaSorting": [],
"bSortClasses": false
});
}
[/code]
This test page has 2 columns, one of which is not visible. When I try and sort the fruit column, the heading background colour changes from blue to red in all other browsers except for IE8. In IE8, the column sorts but the heading background colour does not change.
If I remove the hidden column from the html markup, then the fruit column sorts properly and the heading background colour does change.
Does anyone know why this may be the case?
Thanks for your help.
Cheers,
Kaye
I have a simple test page shown below (I would have posted a link to a test page, but none of the online javascript playgrounds I tried (jsfiddle, jsbin etc) seemed to support IE8).
[code]
<!DOCTYPE html>
DataTables - JS Bin
table.dataTable .sorting_asc {
background: red;
}
table.dataTable .sorting_desc {
background: blue;
}
table.dataTable {
margin: 0 auto;
clear: both;
width: 100%;
border-collapse: collapse;
border: 1px solid #CBCBCB;
font-size: 8pt;
}
table.dataTable thead tr {
background: #D8D8DA;
font-weight: bold;
text-decoration: none;
color: #000; /* header text */
border: none;
white-space: nowrap;
margin: 3px 0;
cursor: pointer;
padding: 0 18px 0 10px;
}
table.dataTable thead th {
border-bottom: 1px solid #CBCBCB;
text-align: left; /* For IE8 this needs to be specified on the th instead of the tr. See http://stackoverflow.com/questions/11321065/th-text-align-compatibility */
}
table.dataTable td, table.dataTable thead th {
border-right: 1px solid #CBCBCB;
padding: 4px 20px 4px 5px;
}
table.dataTable .even {
background-color: #F0F2F3;
}
table.dataTable .odd {
background-color: #D8DCDF;
}
Banana
1
Apple
2
Pear
3
var TestTableObject = {
"columnDefs": [{
"label": "Fruit",
"hidden": false
}, {
"label": "Test",
"hidden": true
}],
"tableID": "TestTable"
};
jQuery(document).ready(function(){
createNewDatatable(TestTableObject);
});
function createNewDatatable(enhancedTableNamespace, containerEl){
var columnInfo = [];
var currItem;
var newItem;
var datatableObject = jQuery(document.getElementById(enhancedTableNamespace.tableID));
var lastItem;
for (var index = 0; index <= enhancedTableNamespace.columnDefs.length - 1; index++) {
currItem = enhancedTableNamespace.columnDefs[index];
newItem = {};
if (currItem.label) {
newItem.sTitle = currItem.label;
}
if (currItem.hidden) {
newItem.bVisible = false;
}
columnInfo.push(newItem);
}
datatableObject.dataTable({
"sDom": "rt",
"iDisplayLength": -1,
"aoColumns": columnInfo,
"aaSorting": [],
"bSortClasses": false
});
}
[/code]
This test page has 2 columns, one of which is not visible. When I try and sort the fruit column, the heading background colour changes from blue to red in all other browsers except for IE8. In IE8, the column sorts but the heading background colour does not change.
If I remove the hidden column from the html markup, then the fruit column sorts properly and the heading background colour does change.
Does anyone know why this may be the case?
Thanks for your help.
Cheers,
Kaye
This discussion has been closed.
Replies
Thanks,
Kaye.