Datatables IE8 and sort indicator

Datatables IE8 and sort indicator

kayengkayeng Posts: 4Questions: 1Answers: 0
edited March 2014 in DataTables 1.9
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

Replies

  • kayengkayeng Posts: 4Questions: 1Answers: 0
    Just wondering, does anyone have any ideas about this one?

    Thanks,
    Kaye.
This discussion has been closed.