TypeError: $ (…) .DataTable n'est pas une fonction

90

J'essaie de travailler avec le JS Datatable de jQuery pour mon projet à partir de ce lien.

J'ai téléchargé la bibliothèque complète de la même source. Tous les exemples donnés dans le package semblent fonctionner correctement, mais lorsque j'essaye de les incorporer dans my WebForms, le CSS, JS ne fonctionne pas du tout.

Voici ce que j'ai fait: 

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

Ma structure de fichiers pour le JS et le CSS dans ma solution se présente comme suit:

Structure de fichier de JS et CSS dans la solution

J'ai ajouté toutes les références JS et CSS nécessaires comme indiqué dans le manuel. Le rendu n'est toujours pas comme prévu. Il n'y a pas de CSS et même le JS ne fonctionne pas.

Également dans la console, j'obtiens les erreurs suivantes: 

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

Je n'ai toujours lié aucune donnée dynamique ici (comme dans un répéteur ou plus), mais cela ne fonctionne toujours pas.

Quelqu'un peut-il s'il vous plaît me guider dans la bonne direction pour ce problème?

javascript jquery css asp.net datatables Abhishek Ghosh
la source
Quel que soit le code que j'ai écrit était parfaitement bien, mais j'ai aussi eu la même erreur. Après une longue analyse, je viens de redémarrer mon PC car je n'ai pas redémarré depuis les 7 derniers jours. Ensuite, mon code a commencé à fonctionner.
Ashok kumar
@Ashokkumar: vous avez probablement de la chance!
Abhishek Ghosh

Réponses:

130

CAUSE

Il peut y avoir plusieurs raisons à cette erreur.

  • La bibliothèque jQuery DataTables est manquante.
  • La bibliothèque jQuery est chargée après jQuery DataTables.
  • Plusieurs versions de la bibliothèque jQuery sont chargées.

SOLUTION

N'incluez qu'une seule version de la bibliothèque jQuery version 1.7 ou plus récente avant jQuery DataTables.

Par exemple:

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

Voir jQuery DataTables: Erreurs de console JavaScript courantes pour plus d'informations à ce sujet et sur d'autres erreurs de console courantes.

Gyrocode.com
la source
45

Cela a fonctionné pour moi. Mais assurez-vous de charger le jquery.js avant le fichier dataTable.js préféré. À votre santé!

<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
la source
8
L'appel $ .noConflict () dans la méthode a été la clé pour moi. Merci.
jrebs
36

J'ai eu cette erreur parce que j'ai découvert que j'avais référencé jQuery deux fois.

La première fois: sur la page maître ( _Layout.cshtml) dans ASP.NET MVC, puis à nouveau sur une page en cours, j'ai donc commenté celle de la page maître.

Si vous utilisez ASP.NET MVC, cet extrait de code peut vous aider

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

et dans la page actuelle j'ai ajouté ces lignes

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

J'espère que cela vous aidera même si vous n'utilisez pas ASP.NET MVC

Basheer AL-MOMANI
la source
En fait, j'ai commenté jquery.min.js dans _Layout.cshtml. Cependant, ce qui a vraiment fonctionné pour moi, c'est de mettre @RenderSection ("scripts", requis: false) tout en bas après tous les éléments <scripts> </scripts>.
muhammad tayyab
merci beaucoup, votre réponse a pris fin 4 heures d'installation et de réinstallation des datatables jquery! J'ai une question cependant: que faire si j'avais besoin de jQuery dans _Layout.cshtml et de tables de données dans myView.cshtml, que dois-je faire puisque ne pas mentionner jQuery dans myView.cshtml provoquera "jQuery n'est pas défini"?
Hamza Dahmoun
19

si, pour une raison quelconque, deux versions de jQuery sont chargées (ce qui n'est pas recommandé), l'appel à $.noConflict(true)partir de la deuxième version renverra les variables jQuery de portée globale à celles de la première version.

Parfois, cela peut être un problème avec une version plus ancienne (ou non stable) des fichiers JQuery

Utilisation de la solution $.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
la source
utiliser jquery avec laravel avec Blade comme moteur de création de modèles ... Étonnamment, c'est la seule façon dont cela a fonctionné pour moi - Bien sûr, vous connaissez les développeurs ... Quand cela fonctionne, vous arrêtez de chercher!
daniel Warui
noConflict () a fonctionné pour moi. Je suppose que j'avais une autre version de jQuery installée.
Aaron
10

Voici l'ensemble complet de JS et CSS requis pour que le plugin de table d'exportation fonctionne parfaitement.

J'espère que cela vous fera gagner du temps

   <!--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 pour ajouter des boutons d'exportation sur la table avec id = tbl

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

Résultat :-

entrez la description de l'image ici

Hitesh Sahu
la source
J'ai pu faire cela sans les appels de script "boutons de table d'exportation". Bon produit.
Mark le
7

Il peut y avoir deux raisons à cette erreur:

Première

Vous logez jQuery.DataTables.jsavant jquery.jsdonc pour cela: -

Vous devez charger jQuery.jsavant de chargerjQuery.DataTables.js

Seconde

Vous utilisez deux versions de jQuery.jssur la même page donc pour cela: -

Essayez d'utiliser la version supérieure et assurez-vous que les deux liens ont la même version de jQuery

Tenstormavi
la source
Un problème potentiel pour atteindre "TypeError: $ (…) .DataTable n'est pas une fonction" puisque Datatables a commencé à fournir un générateur de téléchargement à choisir soi-même est que vous sélectionnez jquery dans le téléchargement, mais que vous l'avez déjà sur votre page.
Vaincu Wombat
Pour être clair, cette erreur est également générée par D'AUTRES sources. Je les avais dans le bon ordre et n'utilisais pas deux jQuerys. Juste au cas où une autre pauvre âme viendrait ... Quand cela fonctionne, DataTables est merveilleux, mais c'est un peu floconneux à mon goût (environ une heure pour faire fonctionner une autre installation ******!
BeNice
2

Honnêtement, cela a pris des heures pour résoudre ce problème. Finalement une seule chose a fonctionné une reconfirmation à la solution fournie par "Basheer AL-MOMANI". Ce qui est juste une déclaration

   @RenderSection("scripts", required: false)

dans le _Layout.cshtmlfichier après tous les <script></script>éléments et en commentant également le script jquery dans le même fichier. Deuxièmement, je devais ajouter

 $.noConflict();

dans l'appel de fonction jquery à un autre fichier * .cshtml comme:

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

        });
Muhammad tayyab
la source
1

J'ai également rencontré cette erreur. Pour une raison quelconque, j'avais initialement codé

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

Cela ne lèverait pas l'erreur parfois et d'autres fois. En changeant le code en

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

L'erreur semble s'être arrêtée

Mike Volmar
la source
0

Je sais que son achat tardif peut aider quelqu'un

Cela peut également se produire si vous n'ajoutez pas $('#myTable').DataTable();à l'intérieur dudocument.ready

Alors au lieu de ça

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

Essaye ça

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

Dans mon cas, la solution était de supprimer les cookies du navigateur.

Agath
la source
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
la source
0

Ayant le même problème dans Flask, j'avais déjà un modèle qui chargeait JQuery, Popper et Bootstrap. J'étendais ce modèle dans un autre modèle que j'utilisais comme base pour charger la page contenant le tableau.

Pour une raison quelconque, dans Flask, apparemment, les fichiers du modèle externe se chargent avant les fichiers des tables ci-dessus dans la hiérarchie (ceux que vous étendez), donc JQuery se chargeait avant les fichiers DataTables à l'origine du problème.

J'ai dû créer un autre modèle où j'exécute toutes mes importations de CDN JS au même endroit, ce qui a résolu le problème.

Daniel Herrera
la source