DataTable JQuery Plugin - "DataTable is not a function" error

An alternative solution to "DataTable is not a function" error

Posted by thebernardlim on March 17, 2021

I came across this problem recently when I was trying to use the jQuery DataTable plugin for tables in one of my webpages. Error: “$(…).DataTable is not a function” Image

I was assuming it is supposedly very easy to solve, however to my surprise, the solutions I found online did not really help, which ended up with a lot of time wasted.

Here are the solutions which you will mostly find online (which you should try first):

  • jQuery DataTables library is missing.
  • jQuery library is loaded after jQuery DataTables.
  • Multiple versions of jQuery library is loaded.

I ensured that my solution had no jQuery duplicates and the ‘jQuery DataTable’ script was only loaded after ‘jQuery’ main script. However the problem still persisted. Image

Ultimately, the alternative solution that worked for me was to add a ‘defer’ attribute to the ‘jQuery DataTable’ script tag. defer attribute ensures that script is only executed when page has finished parsing, which means the ‘jQuery DataTable’ script will only be executed AFTER the ‘jQuery’ main script.

Image

Hoped this will be useful.