Uncaught TypeError: Object [object Object] has no method 'dataTable'

Pardon me for asking this noob question, which many have asked before. The most common mistake are that the js is not properly included or the order of the included js is affecting the dependencies. I have kind of rule out 2 of this possible mistakes and I am still puzzled why I am getting the no method error.

On inspection this is how it looks like:

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.dataTables.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.dataTables_themeroller.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.dataTables.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.dataTables.min.js?body=1" type="text/javascript"></script>
<script src="/assets/main.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

In my main.js, I only have the code below:

$(document).ready(function() {
  $('#table_id').dataTable();
});

Correct me if I am wrong, the core DataTable css and js are included and the order is correct. Appreciate any advice.