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

In my case the solution was to delete cookies from the browser.

Having the same issue in Flask, I had already a template that loaded JQuery, Popper and Bootstrap. I was extending that template into other template that I was using as a base to load the page that had the table.

For some reason in Flask apparently the files in the outer template load before the files in the tables above in the hierarchy (the ones you are extending) so JQuery was loading before the DataTables files causing the issue.

I had to create another template where I run all my imports of JS CDNs in the same place, that solved the issue.

Same error occurs when working with DataTables in a Laravel project. Even if the following solutions are tried, the error still remains:

1. making sure jQuery is included
2. include jQuery before including the DataTables
3. making sure only one version of jQuery is added

In order to remove the error, after making sure the above conditions are fulfilled, add "defer" to the tag which includes the DataTables. For example,

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>

Sometimes it happens that the script (initializing of datatable) is embedded in a general page template, so if one of the pages that actually does not have any table and you did not import the jquery related files for datatable, you face this error, since the general initialization still is looking for that. (**This was in my case**)

Solution: Is to wrap the initialization of datatable inside a codition that check presence of the library before that:

Here is practical example of it.

if (typeof jQuery.fn.DataTable != "undefined"){
$('#accordionExample table').DataTable( {
"pageLength": 5,
"info": false,
"order": [[ 1, "desc" ]]
} );
}

I tried many things but my solution was adding "defer" after html script that you included datatables.

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>

I have Added **defer** to the data table jquery library reference. Now it is working for me.

<script src="~/Scripts/jquery.dataTables.min.js" defer></script>

This may also happen if you write Datatable instead of DataTable. (DataTable T must be capital). this is a beginner's mistake.
```
$(document).ready(function() {
$('#category-table').DataTable({
// Your Code
});
```

if you are sure that you aligned your scripts as described above, please make sure you DataTable word case is correct.

Before
~~~
$(document).ready(function() {
$('#myTable').Datatable();
});
~~~
After
~~~
$(document).ready(function() {
$('#myTable').DataTable();
});
~~~
small t is creating problem, when I changed this t to T it worked like a charm.

Check your Nuget packages. I had to remove jQuery nuget packages to get this to work.