SCRIPT5007: Unable to get value of the property 'style': object is null or undefined

clarkandy

I have implement the following Datatable which is working fine on all browsers except IE7/IE8.

I get the following Error:
SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
jquery.dataTables.min.js, line 78 character 277

I am very new to Datatables and looking on the web I can not see anything obvious


[code]

$(document).ready(function () {
var rowData = [];
var jobTable = $("#jobDataTable").dataTable({
"sDom": '<"H"l>rt<"F"ip>',
"bServerSide": true,
"sAjaxSource": '@Url.Action("GetKJListHandler", "Job")',
"bProcessing": true,
"bJQueryUI": true,
"bStateSave": true,
"bPaginate": true,
"bSort": true,
"rowHeight": "auto",
"sPaginationType": "full_numbers",
"aoColumns": [
{
"mDataProp": null,
"sDefaultContent": "",
"bSortable": false,
"sWidth": "30px",
"fnRender": function (obj) {
return "";
}
},
{
"mDataProp": "ID",
"fnRender": function (oObj) {
var jobUrl = '@Url.Action("View", "Job")';
var jobID = oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp];

return "KJ" + jobID + "";
}
},
{
"mDataProp": "Name",
"sWidth": "40%"
},
{
"mDataProp": "Status",
"bSortable": false
},
{
"mDataProp": "TotalSubJobs",
"sClass": "textalign-center"
},
{
"mDataProp": "Client",
"sWidth": "20%"
},
{
"mDataProp": "PlannedFTPDate",
"fnRender": function (obj, val) {
return FormatJSONDate(val);
}
},
{
"mDataProp": "StartedDate",
"bSortable": false,
"fnRender": function (obj, val) {
return FormatJSONDate(val);
}
},
],
"fnPreDrawCallback": function (oSettings) {
rowData = [];
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
rowData.push(aData);
},
"fnDrawCallback": function (oSettings) {
for (var i = 0; i < rowData.length; i++) {
jobTable.$("#sparkline" + rowData[i].ChartID).sparkline([
rowData[i].PendingSubJobs,
rowData[i].SubJobsOnTime,
rowData[i].LateStageSubJobs,
rowData[i].SubJobsOnHoldOrErrored,
rowData[i].CompletedSubJobs],
{
type: "pie",
height: 30,
borderWidth: 2,
borderColor: "#E1E1E1",
sliceColors: ["#EBEBEB", "#07D507", "#F93B3B", "#C143C1", "#9C9C9C", "#1972EF"],
tooltipFormat: "● {{value}} {{offset:names}} {{percent.1}}%",
tooltipValueLookups: {
names: {
0: "Pending Sub Jobs",
1: "SubJobs On Time",
2: "Late Sub Jobs",
3: "Sub Jobs On Hold/Errored",
4: "Completed Sub Jobs",
5: "Voided Sub Jobs"
}
}
});
}
}
});

$("thead input").keyup(function () {
jobTable.fnFilter(this.value, $("thead input").index(this));
});
});

[/code]

andrewmullins

Hello,

I encountered exactly the same issue and it seems that the issue is related to a trailing comma at the end of your data table properties list. The comma at the end of line 61 in the code is probably at fault.

It seems that IE7/8 are quite strict regarding extra commas in these cases.