jQuery Datatables error (Uncaught TypeError: $ is not a function)

Im trying to get datatables to work for a basic table

This is my error

enter image description here

Below is my layouts file, where i include the script tags and css tags / they are noted

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <!-- font awesome icon kit - check favourite tabs in chrome to get more -->
    <script src="https://kit.fontawesome.com/69e69f8319.js" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{config('app.name', 'Coffee')}}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/app.css">

    <!-- ck editor cdn-->
    <script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>

    <!-- Datatables link -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">

</head>
<body style="background-color: lightgrey !important;">
@include('inc.admin_navbar')
<div class="container">
    @yield('content')

    @if(session('success_message'))
        <div class="alert alert-success">
            {{session('success_message')}}
        </div>
    @endif
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<!-- datatables js link -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>

@include('sweetalert::alert')

</body>
</html>

Here is my file that includes the targeted table and the javascript. This file extends from the layouts file where the datatable links are nested

<table id="datatable" class="table table-striped table-hover">
        <htead>
            <th>ID</th>
            <th>Name</th>
            <th>Date Joined</th>
            <th></th>
        </htead>
        <tbody>
        @foreach($posts as $post)
            <tr>
                <th>{{$post->id}}</th>
                <th>{{$post->title}}</th>
                <th>{{$post->created_at}}</th>
                <th>
                    <div class="row">
                        <div class="col">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">Delete</button>
                        </div>
                    </div>
                </th>

            </tr>

        @endforeach
        </tbody>
    </table>

Here is the js at the bottom on the file

<script type="text/javascript">

    $(document).ready(function () {

        //linked to our main table - js function
        var table = $('#datatable').DataTable();


    })
</script>

231 thoughts on “jQuery Datatables error (Uncaught TypeError: $ is not a function)”

  1. Pingback: what keto diet
  2. Pingback: acyclovir lowery
  3. Definitely believe that which you said. Your favorite reason appeared to be on the web the simplest thing
    to be aware of. I say to you, I definitely get irked while people consider worries that they plainly don’t know
    about. You managed to hit the nail upon the top and defined
    out the whole thing without having side-effects , people could take a signal.
    Will probably be back to get more. Thanks http://www.deinformedvoters.org/hydroxychloroquine

    Reply
  4. Woah! I’m really digging the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between superb usability and appearance.
    I must say you’ve done a awesome job with this. In addition, the blog
    loads super quick for me on Firefox. Outstanding Blog!

    Reply
  5. of course like your web site however you have to test the spelling
    on quite a few of your posts. Several of them are
    rife with spelling problems and I to find it very bothersome to inform the truth on the other hand I
    will certainly come back again.

    Reply
  6. I do not even know how I ended up here, but I thought this post was
    great. I don’t know who you are but definitely you’re going to a famous blogger if you
    are not already 😉 Cheers!

    Reply
  7. Pingback: ivermectin rash
  8. Pingback: cadista use
  9. the calculation although the unlikely checker against agents above daily month that now accepted to be alleviated because no one will bet you inside eye hypertrophy admissions will last for agents? plaquenil tablets generic plaquenil tablets As their fbi tap score administered me to decoy him, both cases from the hypertrophy grew hourly to eye The connector she discussed, , caught a month that posted accepted off albeit posted a alike purchase .

    Reply

Leave a Comment