Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 965
SML Avatar asked Jul 26 '15 00:07

SML


2 Answers

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

like image 119
charlietfl Avatar answered Oct 21 '22 00:10

charlietfl


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>
like image 30
Spencer Wieczorek Avatar answered Oct 20 '22 23:10

Spencer Wieczorek