TypeError: $(...).DataTable is not a function in jQuery

# TypeError: $(...).DataTable is not a function in jQuery

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

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

To solve the error, make sure to load the jQuery library before loading the DataTables library.

The libraries should be loaded only once on the page, otherwise, the error is thrown.

index.html

Copied!
<!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>

The code for this article is available on GitHub

The order in which the scripts are loaded is very important:

Load the CSS file for the DataTables library.
Load the jQuery library.
Load the DataTables library.
Load your JavaScript code.

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

index.js

Copied!
$(document).ready(function () {
  $('#example').DataTable();
});

The code for this article is available on GitHub

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

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

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

If the error persists, make sure you aren't loading the jQuery library twice. Loading the library a second time reruns the initialization process and causes the error.

When loading the libraries from files on your local files system, make sure 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 you're loading the scripts correctly by opening your Developer tools by pressing F12 and clicking on the Console tab.

If you see any 404 errors related to loading the jQuery scripts, then the path to the file is incorrect.

The code for this article is available on GitHub

# Conclusion

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: $(...).DataTable is not a function in jQuery

# TypeError: $(...).DataTable is not a function in jQuery

# Conclusion

Borislav Hadzhiev