Solve - $(...).DataTable is not a function jQuery Error

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Kate Trifo

Solve - $(...).DataTable is not a function #

The "$(...).DataTable is not a function" jQuery error occurs for multiple reasons:

  1. Forgetting to include the DataTables library.
  2. Loading the DataTables library before the jQuery library.
  3. Loading the jQuery library twice.
  4. Specifying an incorrect path to the jQuery files.

To solve the "$(...).DataTable is not a function" jQuery error, make sure to load the jQuery library before loading the DataTables library. The libraries have to be loaded only once on the page, otherwise the error is thrown.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load CSS file for DataTables --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load DataTables ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> </head> <body> <!-- 👇️ HTML for Table --> <table id="example" class="display" style="width: 100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Jenette Caldwell</td> <td>Development Lead</td> <td>New York</td> <td>30</td> <td>2011/09/03</td> <td>$345,000</td> </tr> <tr> <td>Yuri Berry</td> <td>Chief Marketing Officer (CMO)</td> <td>New York</td> <td>40</td> <td>2009/06/25</td> <td>$675,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> <!-- Your JS code here --> <script src="index.js"></script> </body> </html>

Note the order we loaded the scripts in:

  1. Load the CSS file for the DataTables library
  2. Load the jQuery library
  3. Load the DataTables library
  4. Load your JavaScript code

Here's the code in the index.js file:

index.js
$(document).ready(function () { $('#example').DataTable(); });

If you open your browser, you will see the table load.

We made sure the DOM is ready before initializing the DataTable library.

If you forget to load the DataTables library or load the jQuery library before the DataTables library, you would get the error.

If you're still getting the error, make sure you're not loading the jQuery library twice. Loading the library a second time re-runs the initialization process and causes the error.

When loading the libraries from files on your local files system, make sure that the paths you specify are correct and point to the right files.

Specifying an incorrect path to the jQuery or DataTables scripts is equivalent to not loading the scripts at all.

You can check if the specified paths are correct by opening the console in your browser and checking if you have any 404 errors related to loading the jQuery or DataTables libraries.

Use the search field on my Home Page to filter through my more than 1,000 articles.