TypeError: $(...).DataTable is not a function "Datatable Laravel"

jalil · July 2018

Hello guys, i have a big problem for all the week, i try to integrate a script php to Laravel php, with contains a part javascript witch download information from a Json file and print it with a dataTable, the problem is that i can't find unstand this error that i all tried to solve withount a success.

here you have the attached file containing a part of my algorithme if you can healp me pleaaaase, thank you in advance.

(

@extends('layouts.app')

@section('content')

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "/jalil/public/data.json"
    } );
} );

</script>

<style>
        .content {
            text-align: center;h
        }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif

                  Bienvenu  jalil Interface CSV
            </div>
            </div>
        </div>

    </div>
</div>

<div class="content">

      <table id="example" class="display" style="width:100%" border ='1'>
              <thead>
            <tr>
              <th>Host</th>
              <th>file System</th>
              <th>CSV</th>
              <th>Zabbix</th>
              <th>Warning csv</th>
              <th>Warning zabbix</th>
              <th>Critique csv</th>
              <th>Critique zabbix</th>
              <th>Procédure csv</th>
              <th>Procédure zabbix</th>
              <th>Conforme</th>
            </tr>
              </thead>
          </table>

</div>


@endsection

)

allan · July 2018

My guess is that you are loading jQuery multiple times, but without a test case, it is difficult to say for sure.

Allan

jalil · July 2018

thank you man,
but here below you have a look for my Layout file, you can see that my jQuey is loading only one time in the above alogorithme, so that i think that is the datatable jquery is outright not loading. i am keeping open to all proposition ??? please

(


<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="{{ url('/') }}">
                        {{ config('app.name', 'Laravel') }}
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                        @guest
                            <li><a href="{{ route('login') }}">Login</a></li>
                            <li><a href="{{ route('register') }}">Register</a></li>
                        @else
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" v-pre>
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="{{ route('logout') }}"
                                            onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                            {{ csrf_field() }}
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        @yield('content')
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

)

allan · July 2018

Is jQuery included in the js/app.js file perhaps?

Without a link to a page showing the issue there really isn't all that much more help I can offer.

Allan

jalil · July 2018

yeeeeeeeeeeeeeeeeeeeeeeeessss, Finally i found the Solution, thanks to my internship tutor. finally i'am happyyyyyyyyy

allan · July 2018

Could you share it with us please?

Thanks,
Allan

Bharuakil · July 2018

I got a error $.fn.dataTable.Editor is not a constructor

My code is:
<apex:page controller="samplePayment">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"></link>

function getPayment() { var editor; Visualforce.remoting.Manager.invokeAction( //Invoking controller action getcon '{!$RemoteAction.samplePayment.getpay}', function(response,event){ if(event.status){ $(document).ready(function() { editor = new $.fn.dataTable.Editor( { data: response, table: "#tid", "fields": [ { "label": "Amount:", "name": "Amount" }, { "label": "Currency:", "name": "currency" }, { "label": "Date:", "name": "Date" }, { "label": "USD:", "name": "USD" } ] } ); $('#tid').on('click', 'a.editor_remove', function (e) { e.preventDefault(); editor.remove( $(this).closest('tr'), { title: 'Delete record', message: 'Are you sure you wish to remove this record?', buttons: 'Delete' } ); } ); $('#tid').DataTable( { data: response, "columns": [ {title: "Amount" }, {title: "Currency" }, {title: "Date" }, {title: "USD" }, {title: "Delete", className: "center", defaultContent: 'Delete' } ] } ); } ); } }, {escape:true} ); }

<body>
<button onclick="getPayment()">GetTable</button>

</body>
</apex:page>
please help me

jalil · July 2018

My friends i share with the answer :

you have to add one attribut : " defer " to the script.

this solution will solve the problem of thousands of people who have trouble loading with their dataTable

you have just to do like you see here :

(


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

)

here you will undestand how " defer " works
growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

my reward is to try to add me on other forums that are interresting please or I could be helpful

allan · July 2018

@Bharuakil - Could you open a new question with a link to a page showing the issue please.

@jalil - Thanks for letting us know.

Allan

jalil · July 2018

You are welcome my homy @allan

Jalil

nyamjantsan · February 2019

@jalil thanks. It's working.

alazharfaiz · November 2019

its working for me but when i used bootsrap css, DataTables pagination style doesn't styled as bootstrap theme. @jalil @allan

alazharfaiz · November 2019

<script src="https://code.jquery.com/jquery-3.3.1.js" ></script>

  
  

<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>assets/vendor/datatables/dataTables.bootstrap4.min.css">



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


  <script src="<?php echo base_url() ?>assets/vendor/datatables/dataTables.bootstrap4.min.js" ></script>

allan · November 2019

If you can give me a link to a page showing the issue I can take a look into it.

Allan

nivle · December 2020

For me the issue was solved by not using the concatenated datatables cdn.

colin · December 2020

@nivle I'm surprised that would cause this issue - concatenated or not should behave the same. Did you have a test case or table that could reproduce the issue, please - we'd be interested in seeing it.

Colin

nivle · December 2020

@colin https://stackblitz.com/edit/datatables-columns-adjust-issue?file=index.html
check out this test example I made for another issue I have with datatables.
I added the concatenated cdn in comment in code, all you need to do is
uncomment the concatenated stylesheet and script, and put the non concatenated cdn's in comment. Then clear cache and refresh page, and you'll get in the application console, the issue mentioned here.

colin · December 2020

Thanks, @nivle , that was helpful, but I uncommented those lines and am not seeing the issue - see here: https://stackblitz.com/edit/datatables-columns-adjust-issue-3a9wlp?file=index.html

Could something else be involved?

Colin

nivle · December 2020

@colin well that's random, I made sure it didn't work, tried it 3 times, and now it does? guess i'll just use the concatenated version, and see if it happens again in future.

colin · December 2020

Gremlins in the system, they're sneaky. Shout if you do see it again, it would be a good one to understand,

Colin

nivle · December 2020

@colin Ah, it seems the issue is/was caused by pressing format document on the stackblitz editor (found top right). Not sure what goes wrong there, I guess some bad formatting...

nivle · January 2021

Ah, the issue is/was caused by also pressing ctrl + s to save the changes. The document seems to be auto formatted then.

TypeError: $(...).DataTable is not a function "Datatable Laravel"

TypeError: $(...).DataTable is not a function "Datatable Laravel"

Answers

Howdy, Stranger!

Categories

DataTables

TypeError: $(...).DataTable is not a function "Datatable Laravel"

TypeError: $(...).DataTable is not a function "Datatable Laravel"

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables