“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 functionTo 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:
- TypeError: $(…).datepicker is not a function in jQuery
- Solution To TypeError: $(…).on Is Not A Function In jQuery
- Solutions To The Error: TypeError: $(…).slick is not a Function in jQuery
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css
