Typeerror: $(...).Datatable Is Not a Function

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

CAUSE

There could be multiple reasons for this error.

• jQuery DataTables library is missing.
• jQuery library is loaded after jQuery DataTables.
• Multiple versions of jQuery library is loaded.

SOLUTION

Include only one version of jQuery library version 1.7 or newer before jQuery DataTables.

For example:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>

See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.

DataTable is not a function, what's wrong?

make sure to load the jquery.js before the preferred dataTable.js file.

<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>

 <script>$(document).ready(function () {
    $.noConflict();
    var table = $('# your selector').DataTable();
});</script>

DataTable is not a function error with DataTables JQuery library

You likely need to switch the order of the <script> tags.

Put this one:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

BEFORE this one:

<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

That is, define jQuery before you define DataTables.

Why I get Uncaught TypeError: $(...).DataTable is not a function

When you load jQuery you create a new instance of $ and jQuery which don't have any plugins you had previously loaded and attached to previous instances of jQuery.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

You are loading four different versions of jQuery!

Load one and make sure it is the current version.

Remove all of the lines quoted above except the first one.

You are trying to call DataTables in a script loaded in the body of the document, which is above the footer where you have:

<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>

You need to load the plugin before you call it.

You also shouldn't load the plugin twice.

Move one of those lines so it is immediately after the line where you load jQuery. Remove the other one.

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

The error was gone after I have deleted this two scripts from the html file.

<script src="assets/web/assets/jquery/jquery.min.js"></script><script src="assets/bootstrap/js/bootstrap.min.js"></script>