TypeError: $(…)DataTable is not a function [closed

问题:

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>

回答1:

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

回答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>