datatables - table with sorting errors jquery.dataTables.min

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: datatables - table with sorting errors jquery.dataTables.min.js:5 Uncaught ReferenceError: jQuery is not defined and DataTable is not a function

cpshart asked 7 years ago

Hi I have used the mdb index.html template to create the datatable with sorting by copying HTML, CSS, JS as per instructions on your webpage, but it is creating an error (as is the case when I try and integrate my project into mdb using datatables) in Chrome Dev Tools jquery.dataTables.min.js:5 Uncaught ReferenceError: jQuery is not defined and DataTable is not a function Any help would be much appreciated Thanks in advance Colin Extract of code <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> <!-- Within <head></head> tags--> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> </head> <body> <!-- Start your project here--> <table id="example" class="table table-striped table-bordered table-responsive-md" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> etc. .... <!-- /Start your project here--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html> <script> $(document).ready(function() { $('#example').DataTable(); $('.dataTables_wrapper').find('label').each(function() { $(this).parent().append($(this).children()); }); $('select').addClass('mdb-select'); $('.mdb-select').material_select(); }); </script> I have also added the CSS on your website to css/style.css. Many Thanks Colin

cpshart answered 7 years ago

I just solved the demo code I needed to load jquery-3.2.1.min.js before the jquery.dataTables.min.js script as follows :-

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

I still have some errors on my project code, but I will build it from this template hopefully ..

Uncaught TypeError: $(...).sideNav is not a function
at transactions-a.php:31
(anonymous) @ transactions-a.php:31
22:30:49.875 transactions-a.php:688 Uncaught TypeError: $(...).modal is not a function

Thanks Colin

Mikołaj Smoleński staff answered 7 years ago

Hello, You're correct that jQuery scripts should be added before dataTables. I think that the other errors are also connected with the order of scripts added to Your page. It should be like this:
  1. jQuery
  2. popper
  3. bootstrap
  4. mdb
  5. dataTables
Regards

leneborma answered 5 years ago

The $(…).modal is not a function is usually caused because scripts are loaded in the wrong order . The browser will execute the scripts in the order it finds them. If in a script you attempt to access an element that hasn't been reached yet then you will get an error. Make sure that you don't have a script above one that it requires.

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

Multiple jQuery instances

Sometimes this warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly. The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave one instance of jQuery and your code will work.

Mikołaj Smoleński staff commented 5 years ago

Thanks for sharing your remarks. It might be helpful for other users.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
cpshart
14Support score
6Questions 6Answers
0Snippets likes 0Snippets