6

I am trying to use the jquery plugin data tables, but I can't seem to load the function. I keep getting this error:

Uncaught TypeError: $(...).DataTable is not a function
(anonymous function) @ index.php:167
m.Callbacks.j @ jquery.min.js:2
m.Callbacks.k.fireWith @ jquery.min.js:2
m.extend.ready @ jquery.min.js:2
J @ jquery.min.js:2

Below is my JS code:

$(document).ready(function(){
        $('table#tableID').DataTable({
            paging: true
        });
    });

I am using jQuery V. 1.11.1 I tried to look around for solution, and saw people talking about jQuery not being loaded. I am running other jQuery functions on the same page successfully. This is also the only .ready function on this page. We can tell that jQuery is present, as when the document is ready, it executes the function. I also tried to place the imports of the js and css file in multiple places, as suggested, but did not work. Does anyone have any clue how to fix this?

EDITS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="/js/jquery.dataTables.js"></script>
0

2 Answers 2

15

Order of scripts is important when they are dependent on libraries or other scripts.

Any jQuery related code needs to be included after jQuery.js... that means plugins and any code you write that uses jQuery. Similarly any code you write that uses a plugin must have the plugin loaded before your code

Simply switch the order so jQuery.js loads before dataTables.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="/js/jquery.dataTables.js"></script>

Also make sure you only ever include jQuery once in a page...not once per plugin as some occasionally do

9
  • Thanks for the reply. I changed the order, but it still seems to give the same error. :( I have only added jQuery in once
    – SML
    Jul 26, 2015 at 4:03
  • 3
    look in browser dev tools (F12) network tab..make sure file is loading. Should have status 200
    – charlietfl
    Jul 26, 2015 at 4:04
  • 2
    Found the error: I had multiple references to jQuery!!! Thanks!!! :D
    – SML
    Jul 26, 2015 at 4:10
  • that's why i added the bottom note in answer...happens all the time
    – charlietfl
    Jul 26, 2015 at 4:11
  • 1
    is there online link for jquery.dataTables.js? Jul 25, 2016 at 18:14
2

This is because you are loading the jQuery library before loading jQuery itself. jQuery needs to be loaded before you load the library, you can do that by including the <script> for jQuery before your library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="/js/jquery.dataTables.js"></script>
1
  • 10
    Thanks for the reply. I changed the order, but it still seems to give the same error. :(
    – SML
    Jul 26, 2015 at 3:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.