web-dev-qa-db-fra.com

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

J'essaie de travailler avec Datatable JS de jQuery pour mon projet à partir de this link.

J'ai téléchargé la bibliothèque complète à partir de la même source. Tous les exemples donnés dans le paquet semblent bien fonctionner, mais lorsque je tente de les incorporer dans mon WebForms, les CSS, JS ne fonctionnent 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 fichier pour JS et CSS dans ma solution se présente comme suit:

File structure of JS and CSS in solution

J'ai ajouté toutes les références JS et CSS nécessaires, comme indiqué dans le manuel. Néanmoins, le rendu n’est pas celui attendu. 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 pas lié de données dynamiques ici (comme dans un répéteur ou autre), mais cela ne fonctionne toujours pas.

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

javascriptjquerycssasp.netdatatables
57
Abhishek Ghosh

Vous devez charger jQuery avant de charger tout code associé à jQuery tel que jQuery DataTables, voir ci-dessous:

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

En outre, pour la version de production, il est recommandé de charger la version réduite (se terminant par .min.js à la place).

Voir jQuery DataTables: erreurs de console JavaScript communes pour plus d'informations sur cette erreur et sur d'autres erreurs de console courantes.

78
Gyrocode.com

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

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

29
Basheer AL-MOMANI

Cela a fonctionné pour moi. Mais assurez-vous de charger le fichier 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>
28
Ichorville

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

Parfois, il peut s'agir d'un problème avec une version plus ancienne (ou non stable) des fichiers JQuery.

Solution use $.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>
12
Manoj Patil

Voici le jeu complet de fichiers JS et CSS requis pour que le plug-in d'exportation de table 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 :-

enter image description here

6
Hitesh Sahu

Il peut y avoir deux raisons à cette erreur:

Premier

Vous logez jQuery.DataTables.js avant jquery.js donc pour cela: -

Vous devez charger jQuery.js avant de charger jQuery.DataTables.js

Deuxième

Vous utilisez deux versions de jQuery.js sur 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

4
tenstormavi