Solution For Error “TypeError: $(…).DataTable Is Not A Function” In JQuery

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

“TypeError: $(…).DataTable is not a function” in jQuery is an error common. To fix it you have to know why it occurs, and below we will help you the way to fix it.

Why is the “TypeError: $(…).DataTable is not a function” in jQuery happening?

There are many reasons for generating TypeError: $(…).DataTable is not a function in jQuery error like:

  • Load the jQuery Library after loading the DataTables library
  • Load jQuery Library more than once
  • jQuery DataTables library is missing

The error message occurs as follows:

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

To fix the jQuery “$(…).DataTable is not a function” error, make sure to load the jQuery Library before loading the DataTables library. The Library only needs to be loaded once on the page. Otherwise, an error will be thrown.

<!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>
	<table id="tblProduct" class="display" style="width: 100%">
            <thead>
                <tr>
                    <th>ProductID</th>
                    <th>ProductName</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>SP1</th>
                    <th>Apple</th>
                    <th>5$</th>
                </tr>
            </tfoot>
        </table>
    <script src="main.js"></script>
  </body>
</html>

How to fix this error?

Case 1: Load the jQuery Library after loading the DataTables library

I would load the order of the scripts as follows:

  • The first will be the CSS file for DataTables
  • jQuery Library
  • DataTables library

Code in main.js file:

$(document).ready(function () {
  $('mySelect').DataTable();
});

When you open your browser, you will see the table loading. Before initializing the DataTables library, we make sure the DOM is ready. If you keep getting the error, you may have loaded the jQuery library more than once.

Case 2: Load the jQuery library more than once

Ensure you aren’t loading the jQuery library twice when an error persists. Re-loading the library during the initializing process causes the error to persist.

Ensure the correct path is specified when loading libraries from your local files system. Additionally, make sure the path refers to the correct file. When error requests occur, it’s a sign that the DataTables or jQuery libraries aren’t being loaded correctly. This can be checked in a browser’s console by checking for any 404 errors.

Summary

I solved the TypeError: $(…).DataTable is not a function error in JQuery following the above steps. I hope this article will help you fix your program’s error. Good luck.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *