Filed under datatables , jQuery
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!
dfaa6c6e-ce5c-4ea1-8546-20d0e09fd7b8|0|.0