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!