Getting Uncaught Type Error DataTable() is not a function

Question

I know that this question is asked many times and have plenty of answers on here but my issue is not resolving with any of the answer provided. The issue is I am using datatables for one of my table and I have loaded my jquery in the exact same format as it is in datatables docs but still getting this error.

jquery.min.js:2 Uncaught TypeError: $(...).DataTable is not a function

I have included my jQuery libraries in the following format

IN HEADER I HAVE INCLUDED:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

IN FOOTER I HAVE INCLUDED:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.12.1/js/bootstrap-select.js"></script>

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

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

<script src="assets/js/custombox.min.js"></script>

<script src="assets/js/custom.js">
</script>

But still I am getting this error and seriously I have tried alot changing the position of my jQuery libraries but it's not working any help would be appreciated. Thank you in advance

Answer 1

maybe using wrong function name see it's dataTable() not DataTable() and plus it will be good if you write it in document ready

$(document).ready(function() {
    $('#example').dataTable();
});

Answer 2

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.

Include only one version of jQuery library version before jQuery DataTables.

for example

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>