datatables - table with sorting errors jquery.dataTables.min

Topic: datatables - table with sorting errors jquery.dataTables.min.js:5 Uncaught ReferenceError: jQuery is not defined and DataTable is not a function

cpshart free asked 6 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>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet">  <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>  <table id="example" class="table table-striped table-bordered table-responsive-md" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> etc. ....    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <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

Add comment

leneborma free answered 5 years ago

0 0 Best answer

<p>The $(…).<a href="http://net-informations.com/jq/iq/modal.htm" target="_blank" rel="nofollow">modal</a> 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.</p>

<p><strong>Plugin dependencies</strong></p>

<p>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).</p>

<p><strong>Multiple jQuery instances</strong></p>

<p>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.</p>

Please insert min. 20 characters.

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.

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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:

jQuery
popper
bootstrap
mdb
dataTables

Regards

Add comment

cpshart free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 :-

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

cpshart

14Support score
6Questions 6Answers 0Snippets