DataTables jQuery IE8 bug

I've just bumped into a bug while testing jquery.dataTables in Internet Explorer 8 (IE8).

I kept getting:
SCRIPT5007: Unable to get value of the property 'className': object is null or undefined
jquery.dataTables.min.js , line 27 character 288


I had my table set up and sorted at document.ready like this:

    $('#CGITable').dataTable( {
      "sDom": '<"top">rt<"bottom"><"clear">',
      "aaSorting": [colSorted['CGITable']],
      "bPaginate": false,
      "aoColumns": [
        { "sType": "string", },
        { "sType": "string" },
        { "sType": "numeric-comma" },
        { "sType": "numeric-comma" },
        { "sType": "numeric-comma" },
        { "sType": "numeric-comma" },
        { "sType": "numeric-comma" },
        { "sType": "string" },
      ],
      "fnDrawCallback": function( oSettings ) {
        colSorted['CGITable'] = oSettings['aaSorting'];
      }
  } );

After a lot of digging, the problem seemed to rise from the following two issues in the aoColumns parameter array:

• Remove the trailing commas from the array declaration (as somebody noted here, the syntax is invalid).
• But I also had to add these properties to each columns' configuration: 'sClass': "", "bSortable": true

My final, working piece of jquery dataTables setup is:
    
    $('#CGITable').dataTable( {
      "sDom": '<"top">rt<"bottom"><"clear">',
      "aaSorting": [colSorted['CGITable']],
      "bPaginate": false,
      "aoColumns": [
        { "sType": "string", 'sClass': "", "bSortable": true },
        { "sType": "string", 'sClass': "", "bSortable": true },
        { "sType": "numeric-comma", 'sClass': "", "bSortable": true },
        { "sType": "numeric-comma", 'sClass': "", "bSortable": true },
        { "sType": "numeric-comma", 'sClass': "", "bSortable": true },
        { "sType": "numeric-comma", 'sClass': "", "bSortable": true },
        { "sType": "numeric-comma", 'sClass': "", "bSortable": true },
        { "sType": "string", 'sClass': "", "bSortable": true },
      ],
      "fnDrawCallback": function( oSettings ) {
        colSorted['CGITable'] = oSettings['aaSorting'];
      }
  } );


Has this helped you?
Then please drop me a line :)


Keywords: jquery, dataTables, dataTable, sorting, tables, auto-sorting, aoColumns, IE8, error, unable, className