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

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

jaliljalil Posts: 8Questions: 3Answers: 0

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


)

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • jaliljalil Posts: 8Questions: 3Answers: 0
    edited 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>

    )

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • jaliljalil Posts: 8Questions: 3Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Could you share it with us please?

    Thanks,
    Allan

  • BharuakilBharuakil Posts: 1Questions: 0Answers: 0

    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

  • jaliljalil Posts: 8Questions: 3Answers: 0

    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 :smile:
    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

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

    @jalil - Thanks for letting us know.

    Allan

  • jaliljalil Posts: 8Questions: 3Answers: 0
    edited July 2018

    You are welcome my homy @allan

    Jalil

  • nyamjantsannyamjantsan Posts: 1Questions: 0Answers: 0
    edited February 2019

    @jalil thanks. It's working.

  • alazharfaizalazharfaiz Posts: 2Questions: 0Answers: 0

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

  • alazharfaizalazharfaiz Posts: 2Questions: 0Answers: 0
    <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>
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • nivlenivle Posts: 23Questions: 2Answers: 0

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

  • colincolin Posts: 15,117Questions: 1Answers: 2,583

    @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

  • nivlenivle Posts: 23Questions: 2Answers: 0
    edited 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.

  • colincolin Posts: 15,117Questions: 1Answers: 2,583

    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

  • nivlenivle Posts: 23Questions: 2Answers: 0

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

  • colincolin Posts: 15,117Questions: 1Answers: 2,583

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

    Colin

  • nivlenivle Posts: 23Questions: 2Answers: 0

    @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...

  • nivlenivle Posts: 23Questions: 2Answers: 0

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

This discussion has been closed.