Sabtu, 15 Januari 2022

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

 It was really pain in the ass to look for a solution for that error. But, finally I found it.

Here is the solution: Use defer to call the datatable script and its other following scripts. 

I needed to use datatable with export button, I get the examples code from here.

Here was how I called the scripts that gave me that error:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script type="text/javascript"  src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" ></script>
<script type="text/javascript"  src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js" ></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" ></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" ></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.html5.min.js" ></script>


And how it was fixed:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script type="text/javascript"  src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" defer></script>
<script type="text/javascript"  src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.html5.min.js" defer></script>

I found the solution in this forum and here is the link that explains how defer works.

Tidak ada komentar:

Posting Komentar