DataTables not initializing due to "$ is not a function"

Question

I want to initialize my DataTables, I already downloaded it, call it, and everything seems okay, but when I call the JQuery function to run the datatables it gives me this weird error.

TypeError: $ is not a function

But my code seems okay:

$(document).ready( function () {
$('#table_id').DataTable();
} );

THis is my HTML:

<table id="table_id" class="display">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>
</tbody>

What can this be?

Script order:

<script src="<?php echo base_url('assets2/js/vendor/jquery-2.1.4.min.js');?>"></script>
    <script src="<?php echo base_url('assets/js/datatables.min.js');?>"></script>

    <script src="<?php echo base_url('assets/js/Backoffice_JS.js');?>"></script>

Did you import jQuery in the page (before any code that requires it)? — Pointy, Oct 21 '18 at 20:48
Well check the Network tab in your browser developer tools to verify that jQuery is actually loading from the path your code builds. — Pointy, Oct 21 '18 at 21:04
Possible duplicate of [JQuery - $ is not defined](https://stackoverflow.com/q/2194992/608639) and [Uncaught TypeError: $ is not a function](https://stackoverflow.com/q/30630839/608639) — jww, Oct 22 '18 at 05:51

score 0 · Answer 1 · answered Oct 21 '18 at 20:52

0

I can’t put comment because i ´m novice. So, your problem isn’t datatable, but jQuery. As said in comment, you must import jquery before using jQuery syntax. Use jquery with cdn or import library in your project.

answered Oct 21 '18 at 20:52

Yona Smilevitch

161
9

I pushed it up to the top of the page but now I got an error telling me that "TypeError: $(...).dataTable is not a function" – Gabriel Gomes Oct 21 '18 at 20:56
Have you import correctly datatable js and css files ? – Yona Smilevitch Oct 21 '18 at 20:57
Thanks everyone, I has miss imported certain files! – Gabriel Gomes Oct 21 '18 at 21:02
Happy for you, if your problem is resolved, close your question and mark the response as resolved. – Yona Smilevitch Oct 21 '18 at 21:04

score 0 · Accepted Answer · answered Oct 21 '18 at 21:14

TypeError: $ is not a function

Means that the javascript is not recognizing jquery.

To solve this you need to include jquery CDN before your script code. So it should be like this :

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script>
   $(document).ready( function () {
      $('#table_id').DataTable();
   });
</script>

DataTables not initializing due to "$ is not a function"

2 Answers2

TypeError: $ is not a function