Datatables IE8 and sort indicator

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).

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;
        </script>
        <script src="http://datatables.net/download/build/nightly/jquery.dataTables.js"&gt;
        </script>
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
        <style type="text/css">
            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;
            }
        </style>
    </head>
    <body>
        <table id="TestTable" width="80%">
            <TR>
                <TD width="250">
                    Banana
                </TD>
                <TD>
                    1
                </TD>
            </TR>
            <TR>
                <TD width="250">
                    Apple
                </TD>
                <TD>
                    2
                </TD>
            </TR>
            <TR>
                <TD width="250">
                    Pear
                </TD>
                <TD>
                    3
                </TD>
            </TR>
        </table>
        <SCRIPT>
            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
                });
            }
        </SCRIPT>
    </body>
</html>

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

Latest Images

Trending Articles

Latest Images