IE8 Column Names disappear

pweinroth

I recently upgraded to datatables 1.9.4 and have noticed an issue that is only occurring on ie8 and older browsers. Everything is working great on Chrome, Firefox, and newer versions of IE. The issue is that after rendering the table and either searching or paging the column names disappear. It doesn't always occur at the exact same time. Some times it happens immediately and other times it could take 10 - 20 seconds.

My table is defined as:

return $("#recordTable").dataTable(
{
bServerSide: true,
bProcessing: true,
sAjaxSource: "../results.js",
bJQueryUI: true,
aoColumnDefs: populateColumns(),
oColVis: {
aiExclude: [ 0, cogField ],
buttonText: "Change Columns"
},
sDom: '<"H"iC>rt<"F"lp>',
sPaginationType: "full_numbers",
bStateSave: true,
sCookiePrefix: "test.",
iCookieDuration: 3600,
oLanguage: {
sEmptyTable: "No records found",
sZeroRecords: "No records found",
sInfoEmpty: "",
sProcessing: "Loading..."
},
fnServerData: function(sSource, aoData, fnCallback) {
// if an XHR is running, abort it
if (currentXHR != null) {
currentXHR.abort();
}

// use POST instead of GET to avoid argument length overflow
currentXHR = $.ajax({
url: sSource,
type: "POST",
cache: false,
dataType: "json",
data: aoData,
success: function(json) {
currentXHR = null;
fnCallback(json);
}
});
},
fnStateSaveCallback: function(oSettings, sValue) {
$(".extra_filter").each(function() {
sValue += ',"z' + $(this).attr('name') + '":"' + $(this).val() + '"';
});

return sValue;
},
fnStateLoadCallback: function(oSettings, oData) {
for (filter in oData) {
if ((typeof(filter) == 'string') && (filter.slice(0, 1) == 'z')) {
$(".extra_filter[name='" + filter.slice(1) + "']").val(oData[filter]);
}
}

return true;
},
fnRowCallback: function(nRow, aData) {
// hook up cog menu
$("img.cog", nRow).data("record_id", aData.record_id).data("uniqueId", aData.unique_id).contextMenu("cogMenu", {
menuStyle: {
width: "150px"
},
onShowMenu: function(e, menu) {
if (canEdit == false) {
$('#edit', menu).remove();
$('#copy', menu).remove();
$('#del', menu).remove();
}

return menu;
},
bindings: {
edit: edit_record,
copy: copy_record,
del: delete_record
}
});

It is using the function populateColumns which is defined as
function populateColumns() {
var aoColumns = [];
var columnNames = ["record_id","unique_id","display_name","type","manufacturer","model","cog"];
for (var i = 0; i < columnNames.length; i++) {
var key = columnNames[i];
values={};
if(key == 'cog') {
values['bSortable']=false;
values['sClass']="edit_col";
values['bVisible']=true;
values['sType'] = key;
} else {
values['bSortable']=true;
values['sType'] = key;
values['bVisible']=true;
}
values['sName'] = key;
values['aTargets'] = [key];
values['mData'] = getMDataFunction(key);

aoColumns.push(values);
return aoColumns;
}


function getMDataFunction(key) {
return (function ( source, type, val ) {
if(source[key] != null) {
return '' + source[key] + '';
} else {
return '';
}
});

I really want to take advantage of the ability to use a map of json results instead of a list which is why I upgraded, but regrettably this issue is a show stopper.

Any help you could provide would be greatly appreciated.

pweinroth

After some more debugging it appears that the issue arises when focus enters or leaves the data table. If I sort the columns as long as the cursor stays on the data table the columns are fine. Once the cursor leaves the table area the column headers disappear.