How to fix the DataTables.net Internet Explorer error: "Unable to get value of the property 'style': object is null or undefined"
On one of my latest management projects I had to test and ensure that the project would work as expected in Internet Explorer. With the exception of a few style issues, which are to be expected when IE testing, I noticed that my DataTables.net code was returning the following error: Unable to get value of the property 'style': object is null or undefined. This was only happening in Internet Explorer 7 and below.
Usually IE would return this error message if the number of columns I was declaring in the DataTables javascript did not match the number of headers I had in my HTML. However, I knew that I did have the correct number of headers as the code works as expected in all the other browsers.
When I went to investigate my code I noticed a rogue coma on the last element in my column collection when I was declaring my DataTable. My code looked something like this:
$(document).ready(function () { oTable = $('#dt').dataTable({ "sAjaxSource": 'AllUsers/', "aoColumns": [ { "mDataProp": "Firstname" }, { "mDataProp": "Surname" }, { "mDataProp": "Email" }, ] }); });
When I removed that last coma after my Email column everything worked as expected. Now my code looks like this:
$(document).ready(function () { oTable = $('#dt').dataTable({ "sAjaxSource": 'AllUsers/', "aoColumns": [ { "mDataProp": "Firstname" }, { "mDataProp": "Surname" }, { "mDataProp": "Email" } ] }); });
It's weird that IE had an issue with this and the other browsers were ok with it. I guess it's just down to the different rendering engines in the browsers. It was incorrect before but the other browsers ignored the issue. Thankfully this was an easy fix!