datatables Uncaught TypeError: Cannot read property 'style' of undefined

Rodin10

For whatever reason datatables throws this error inconsistently in Google Chrome, I've tried in other browsers (Firefox and Opera) and the issue doesn't appear there. It seems to be an issue that occurs on a lower (sub 1080p) resolution.

The error that's being thrown is as follows:

application.unminified.js:98170 Uncaught TypeError: Cannot read property 'style' of undefined
at Tb (application.unminified.js:98170)
at A (application.unminified.js:95129)
at nb (application.unminified.js:97748)
at da (application.unminified.js:97104)
at application.unminified.js:96941
at h (application.unminified.js:96833)
at Object.success (application.unminified.js:96863)
at q (application.unminified.js:3202)
at Object.fireWith [as resolveWith] (application.unminified.js:3314)
at c (application.unminified.js:8367)

I'm using Datatables 1.10.10 with Bootstrap 3.3.5 and the following libraries:

Bootstrap 3.3.5, JSZip 2.5.0, pdfmake 0.1.18, DataTables 1.10.10, AutoFill 2.1.0, Buttons 1.1.0, Column visibility 1.1.0, HTML5 export 1.1.0, Print view 1.1.0, ColReorder 1.3.0, FixedColumns 3.2.0, Responsive 2.0.0, RowReorder 1.1.0, Scroller 1.4.0, Select 1.1.0

This issue can happen on any page that uses datatables in my application.

colin

Hi @Rodin10 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

There are lots of threads discussing this error. Generally they seem to indicate there is a mismatch between the number of table columns in HTML and what is defined in Datatables. Without actually seeing a page with the error it will be hard to diagnose. When you see this error verify the HTML table setup with the Datatables config. Make sure the number of columns match.

You can try using the Debugger on the page when the error occurs. Maybe it will pick up the diagnostic info for the developers to look at. Otherwise please post a link to your page or a test case replicating the issue.

Kevin

Rodin10

Hi,

I hope this debug result can tell you guys more. Thanks in advance!

colin

The only thing that springs to mind is this:

        "data": "function(a,b,d){return a.country?a.country.name:\"\"}",
        "name": "country",
        "mData": "function(a,b,d){return a.country?a.country.name:\"\"}",
        "sName": "country"

It's generally not a good idea to have a function for columns.data, it's better to put it into columns.render, so something like:

        "data": country,
        "name": "country",
        "render": function(data){return data.country !== null?data.country.name:''},

If that doesn't help, we'll need to see the problem occurring as I said above.

Cheers,

Colin

Rodin10

I'll try that Colin, thanks!