BinaryWebPark

Avoiding the ‘oCol is undefined’ Error with jQuery-datatables-rails

March 10, 2014

The ‘oCol is undefined’ Error

Recently I installed jQuery-datatables-rails in a Rails 4 project. With the Firebug plugin in Firefox, I received an error ‘oCol is undefined’. With Google Chrome via the console, I received an error ‘Cannot call method ‘fnSetData’ of undefined’.

Huh?

I had setup the application with HAML views and everything seemed to be displaying correctly. I had followed the simple setup instructions from the github README of jQuery-datatables-rails.

The Solution

It turns out the jQuery datatables plugin requires that the number of td elements in the tbody tag match the number of th elements in the thead tag of your table.

Also, if your table looks like it has been injected with jQuery datatables functionality but it still isn’t sorting, make sure you are nesting your tr and td tags properly. Due to HAML indentation properties, I found that I had a blank thead tag, and I couldn’t sort. Once I had the right nesting, everything started working properly.