TypeError: $ (…) .DataTable ist keine Funktion

90

Ich versuche, über diesen Link mit jQuerys Datatable JS für mein Projekt zu arbeiten .

Ich habe die komplette Bibliothek von derselben Quelle heruntergeladen. Alle im Paket angegebenen Beispiele scheinen gut zu funktionieren, aber wenn ich versuche, sie in mein WebFormsCSS, JS zu integrieren, funktionieren sie überhaupt nicht.

Folgendes habe ich getan: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="myTable" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
               <!-- table body -->
            </tbody>
        </table>
    </div>
    <script src="js/jquery.dataTables.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
    </form>
</body>
</html>

Meine Dateistruktur für JS und CSS in meiner Lösung sieht wie folgt aus:

Dateistruktur von JS und CSS in Lösung

Ich habe alle erforderlichen JS- und CSS-Referenzen hinzugefügt, wie im Handbuch gezeigt. Trotzdem ist das Rendering nicht wie erwartet. Es gibt kein CSS und selbst das JS funktioniert nicht.

Auch in der Konsole erhalte ich folgende Fehler: 

ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function

Ich habe hier noch keine dynamischen Daten gebunden (wie in einem Repeater oder so), aber es funktioniert immer noch nicht.

Kann mich bitte jemand in die richtige Richtung für dieses Problem führen?

javascript jquery css asp.net datatables Abhishek Ghosh
quelle
Was auch immer der Code ist, den ich geschrieben habe, war vollkommen in Ordnung, aber ich habe auch den gleichen Fehler bekommen. Nach langer Analyse habe ich meinen PC gerade neu gestartet, da ich seit den letzten 7 Tagen nicht mehr neu gestartet habe. Dann fing mein Code an zu funktionieren.
Ashok Kumar
@ Ashokkumar: Du hast wahrscheinlich Glück gehabt!
Abhishek Ghosh

Antworten:

130

URSACHE

Es kann mehrere Gründe für diesen Fehler geben.

  • Die jQuery DataTables-Bibliothek fehlt.
  • Die jQuery-Bibliothek wird nach jQuery DataTables geladen .
  • Es werden mehrere Versionen der jQuery-Bibliothek geladen.

LÖSUNG

Fügen Sie vor jQuery DataTables nur eine Version der jQuery-Bibliothek Version 1.7 oder höher ein.

Zum Beispiel:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>

Weitere Informationen zu diesem und anderen häufigen Konsolenfehlern finden Sie unter jQuery DataTables: Häufige JavaScript-Konsolenfehler .

Gyrocode.com
quelle
45

Das hat bei mir funktioniert. Stellen Sie jedoch sicher, dass Sie die Datei jquery.js vor der bevorzugten Datei dataTable.js laden. Prost!

<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>

 <script>$(document).ready(function () {
    $.noConflict();
    var table = $('# your selector').DataTable();
});</script>
Ichorville
quelle
8
Der Aufruf von $ .noConflict () in der Methode war der Schlüssel für mich. Vielen Dank.
jrebs
36

Ich habe diesen Fehler erhalten, weil ich herausgefunden habe, dass ich zweimal auf jQuery verwiesen habe.

Das erste Mal: ​​auf der Masterseite ( _Layout.cshtml) in ASP.NET MVC und dann wieder auf einer aktuellen Seite, also habe ich die auf der Masterseite auskommentiert.

Wenn Sie ASP.NET MVC verwenden, kann Ihnen dieses Snippet helfen

@*@Scripts.Render("~/bundles/jquery")*@//comment this line 
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

und auf der aktuellen Seite habe ich diese Zeilen hinzugefügt

<script src="~/scripts/jquery-1.10.2.js"></script>

<!-- #region datatables files -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->

Ich hoffe, dies hilft Ihnen, auch wenn Sie ASP.NET MVC nicht verwenden

Basheer AL-MOMANI
quelle
Eigentlich habe ich jquery.min.js in _Layout.cshtml kommentiert. Was für mich jedoch wirklich funktioniert hat, ist, @RenderSection ("scripts", erforderlich: false) nach allen <scripts> </ script> -Elementen ganz unten zu setzen.
Muhammad Tayyab
Vielen Dank, Ihre Antwort endete 4 Stunden nach der Installation und Neuinstallation von jquery datatables! Ich habe jedoch eine Frage: Was Wenn ich jQuery in _Layout.cshtml und Datentabellen in myView.cshtml benötige, was soll ich tun, da jQuery in myView.cshtml nicht erwähnt wird und "jQuery ist nicht definiert"?
Hamza Dahmoun
19

Wenn aus irgendeinem Grund zwei Versionen von jQuery geladen werden (was nicht empfohlen wird), werden beim Aufrufen $.noConflict(true)ab der zweiten Version die jQuery-Variablen mit globalem Gültigkeitsbereich an die der ersten Version zurückgegeben.

Manchmal kann es zu Problemen mit älteren Versionen (oder nicht stabilen) von JQuery-Dateien kommen

Lösungsgebrauch $.noConflict();

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
    $('#myTable').DataTable();
});
// Code that uses other library's $ can follow here.
</script>
Manoj Patil
quelle
Verwenden von JQuery mit Laravel mit Blade als Vorlagen-Engine ... Überraschenderweise ist dies die einzige Möglichkeit, wie es bei mir funktioniert hat - Natürlich kennen Sie Entwickler ... Wenn es funktioniert, hören Sie auf zu suchen!
Daniel Warui
noConflict () hat bei mir funktioniert. Ich glaube, ich hatte eine andere Version von jQuery installiert.
Aaron
10

Hier finden Sie den vollständigen Satz von JS und CSS, die erforderlich sind, damit das Exporttabellen-Plugin einwandfrei funktioniert.

Hoffe, es wird Ihre Zeit sparen

   <!--Import jQuery before export.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <!--Data Table-->
    <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

    <!--Export table buttons-->
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
    <script type="text/javascript"  src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>

<!--Export table button CSS-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

Javascript zum Hinzufügen von Exportschaltflächen zur Tabelle mit id = tbl

  $('#tbl').DataTable({
                        dom: 'Bfrtip',
                        buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                        ]
                    });

Ergebnis: -

Geben Sie hier die Bildbeschreibung ein

Hitesh Sahu
quelle
Ich konnte dies ohne die Skriptaufrufe "Tabellenschaltflächen exportieren" tun. Gutes Zeug.
Mark
7

Für diesen Fehler kann es zwei Gründe geben:

Zuerst

Sie lodieren jQuery.DataTables.jsvorher jquery.jsso dafür: -

Sie müssen laden, jQuery.jsbevor Sie ladenjQuery.DataTables.js

Zweite

Sie verwenden dafür zwei Versionen jQuery.jsauf derselben Seite: -

Versuchen Sie, die höhere Version zu verwenden, und stellen Sie sicher, dass beide Links dieselbe Version von haben jQuery

Tenstormavi
quelle
Ein potenzielles Problem beim Erreichen von "TypeError: $ (…) .DataTable ist keine Funktion", da Datatables damit begonnen hat, einen eigenen Download-Builder bereitzustellen, besteht darin, dass Sie jquery im Download auswählen, es aber auch bereits auf Ihrer Seite haben.
Besiegte Wombat
Nur um klar zu sein - dieser Fehler wird auch aus ANDEREN Quellen geworfen. Ich hatte sie in der richtigen Reihenfolge und verwendete nicht zwei jQuerys. Nur für den Fall, dass eine andere arme Seele mitkommt ... Wenn es funktioniert DataTables ist wunderbar, aber es ist viel zu schuppig für meinen Geschmack (ungefähr eine Stunde, um eine weitere ****** - Installation zum
Laufen
2

Ehrlich gesagt, es dauerte Stunden, um dies zu beheben. Schließlich hat nur eines eine Bestätigung der von "Basheer AL-MOMANI" bereitgestellten Lösung bewirkt. Welches ist nur eine Aussage

   @RenderSection("scripts", required: false)

innerhalb der _Layout.cshtmlDatei nach allen <script></script>Elementen und auch das jquery-Skript in der gleichen Datei kommentieren. Zweitens musste ich hinzufügen

 $.noConflict();

Rufen Sie innerhalb der jquery-Funktion eine andere * .cshtml-Datei auf als:

 $(document).readyfunction () {
          $.noConflict();
          $("#example1").DataTable();
         $('#example2').DataTable({
              "paging": true,
              "lengthChange": false,
              "searching": false,
              "ordering": true,
              "info": true,
              "autoWidth": false,
          });

        });
Muhammad Tayyab
quelle
1

Ich bin auch auf diesen Fehler gestoßen. Aus irgendeinem Grund hatte ich ursprünglich codiert

var table = $('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

Dies würde den Fehler manchmal und manchmal nicht auslösen. Durch Ändern des Codes in

$('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

Der Fehler scheint gestoppt zu sein

Mike Volmar
quelle
0

Ich weiß, dass der späte Kauf jemandem helfen kann

Dies kann auch passieren, wenn Sie nicht $('#myTable').DataTable();innerhalb der hinzufügendocument.ready

Also stattdessen

$('#myTable').DataTable();

Versuche dies

$(document).ready(function() {
    $('#myTable').DataTable();
});
Tech Yogesh
quelle
0

In meinem Fall bestand die Lösung darin, Cookies aus dem Browser zu löschen.

Agath
quelle
0 
// you can get the Jquery's librairies online with adding  those two rows in your page

 <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
Carmel Nkesh
quelle
0

Mit dem gleichen Problem in Flask hatte ich bereits eine Vorlage, die JQuery, Popper und Bootstrap lud. Ich habe diese Vorlage in eine andere Vorlage erweitert, die ich als Basis zum Laden der Seite mit der Tabelle verwendet habe.

Aus irgendeinem Grund werden in Flask anscheinend die Dateien in der äußeren Vorlage vor den Dateien in den Tabellen oben in der Hierarchie geladen (die, die Sie erweitern), sodass JQuery vor den DataTables-Dateien geladen wurde, die das Problem verursacht haben.

Ich musste eine andere Vorlage erstellen, in der ich alle meine Importe von JS-CDNs an derselben Stelle ausführte, wodurch das Problem behoben wurde.

Daniel Herrera
quelle