TypeError: $ (…) .DataTable no es una función

90

Estoy tratando de trabajar con Datatable JS de jQuery para mi proyecto desde este enlace.

Descargué la biblioteca completa de la misma fuente. Todos los ejemplos dados en el paquete parecen funcionar bien, pero cuando trato de incorporarlos en mi WebForms, el CSS, JS no funcionan en absoluto.

Esto es lo que he hecho: 

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

Mi estructura de archivos para JS y CSS en mi solución tiene el siguiente aspecto:

Estructura de archivos de JS y CSS en solución

He agregado todas las referencias JS y CSS necesarias como se muestra en el manual. Aún así, el renderizado no es el esperado. No hay CSS e incluso JS no funciona.

También en la consola obtengo los siguientes errores: 

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

Todavía no he vinculado ningún dato dinámico aquí (como dentro de un repetidor más o menos) todavía no está funcionando.

¿Puede alguien guiarme en la dirección correcta para este problema?

javascript jquery css asp.net datatables Abhishek Ghosh
fuente
Cualquiera que sea el código que he escrito, estaba perfectamente bien, pero también obtuve este mismo error. Después de un largo análisis, reinicié mi PC ya que no reinicié desde los últimos 7 días. Entonces, mi código comenzó a funcionar.
Ashok kumar
@Ashokkumar: ¡probablemente tuviste suerte!
Abhishek Ghosh

Respuestas:

130

PORQUE

Puede haber varias razones para este error.

  • Falta la biblioteca jQuery DataTables.
  • La biblioteca jQuery se carga después jQuery DataTables.
  • Se cargan varias versiones de la biblioteca jQuery.

SOLUCIÓN

Incluir solo uno versión de la biblioteca jQuery versión 1.7 o más reciente antes jQuery DataTables.

Por ejemplo:

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

Consulte jQuery DataTables: errores comunes de la consola de JavaScript para obtener más información sobre este y otros errores comunes de la consola.

Gyrocode.com
fuente
45

Esto funcionó para mí. Pero asegúrese de cargar jquery.js antes del archivo dataTable.js preferido. ¡Salud!

<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
fuente
8
La llamada $ .noConflict () en el método fue la clave para mí. Gracias.
jrebs
36

Recibí este error porque descubrí que hice referencia a jQuery dos veces.

La primera vez: en la página maestra (_Layout.cshtml ) en ASP.NET MVC, y luego nuevamente en una página actual, así que comenté la de la página maestra.

Si está utilizando ASP.NET MVC, este fragmento podría ayudarlo

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

y en la página actual agregué estas líneas

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

Espero que esto te ayude incluso si no usas ASP.NET MVC

Basheer AL-MOMANI
fuente
De hecho, comenté jquery.min.js dentro de _Layout.cshtml. Sin embargo, lo que realmente funcionó para mí es poner @RenderSection ("scripts", required: false) en la parte inferior después de todos los elementos <scripts> </scripts>.
muhammad tayyab
muchas gracias, su respuesta terminó 4 horas de instalación y reinstalación de tablas de datos jquery! Sin embargo, tengo una pregunta: ¿qué pasa si necesito jQuery en _Layout.cshtml y necesito tablas de datos en myView.cshtml, qué debo hacer ya que no mencionar jQuery en myView.cshtml causará "jQuery no está definido"?
Hamza Dahmoun
19

si por alguna razón se cargan dos versiones de jQuery (lo cual no se recomienda), llamar $.noConflict(true) desde la segunda versión devolverá las variables jQuery de ámbito global a las de la primera versión.

A veces podría ser un problema con la versión anterior (o no estable) de los archivos JQuery

Uso de la solución $.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
fuente
usando jquery con laravel con Blade como mi motor de plantillas ... Sorprendentemente, esta es la única forma en que funcionó para mí - Por supuesto que conoces a los desarrolladores ... ¡Cuando funciona, dejas de buscar!
Daniel Warui
noConflict () funcionó para mí. Supongo que tenía instalada otra versión de jQuery.
Aaron
10

Aquí está el conjunto completo de JS y CSS necesario para que el complemento de tabla de exportación funcione perfectamente.

Espero que te ahorre tiempo

   <!--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 para agregar botones de exportación en la tabla con id = tbl

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

Resultado: -

ingrese la descripción de la imagen aquí

Hitesh Sahu
fuente
Pude hacer esto sin las llamadas al script "exportar botones de tabla". Buen material.
Mark
7

Puede haber dos razones para ese error:

primero

Estás cargando jQuery.DataTables.jsantes, jquery.jsasí que para eso: -

Necesitas cargar jQuery.jsantes de cargarjQuery.DataTables.js

Segundo

Está utilizando dos versiones de jQuery.jsen la misma página, así que para eso: -

Intente utilizar la versión superior y asegúrese de que ambos enlaces tengan la misma versión de jQuery

tenstormavi
fuente
Un problema potencial para lograr "TypeError: $ (…) .DataTable no es una función" desde que Datatables comenzó a proporcionar un constructor de descargas para elegir tu propio es que seleccionas jquery en la descarga pero también lo tienes en tu página.
Wombat vencido
Para que quede claro, este error también proviene de OTRAS fuentes. Los tenía en el orden correcto y no estaba usando dos jQuerys. En caso de que aparezca algún otro pobrecito ... Cuando funciona, DataTables es maravilloso, pero es
demasiado inestable
2

Honestamente, esto tomó horas para solucionarlo. Finalmente solo una cosa funcionó una reconfirmación a la solución proporcionada por "Basheer AL-MOMANI". Que es solo poner declaración

   @RenderSection("scripts", required: false)

dentro del _Layout.cshtmlarchivo después de todos los <script></script>elementos y también comentando el script jquery en el mismo archivo. En segundo lugar, tuve que agregar

 $.noConflict();

dentro de la llamada a la función jquery en otro archivo * .cshtml como:

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

        });
muhammad tayyab
fuente
1

También encontré este error. Por alguna razón originalmente había codificado

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

Esto no arrojaría el error a veces y otras veces lo haría. Cambiando el código a

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

El error parece haberse detenido

Mike Volmar
fuente
0

Sé que es tarde Buy puede ayudar a alguien

Esto también podría suceder si no agrega $('#myTable').DataTable();dentro deldocument.ready

Entonces en lugar de esto

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

Prueba esto

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

En mi caso la solución fue eliminar las cookies del navegador.

Agath
fuente
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
fuente
0

Al tener el mismo problema en Flask, ya tenía una plantilla que cargaba JQuery, Popper y Bootstrap. Estaba extendiendo esa plantilla a otra plantilla que estaba usando como base para cargar la página que tenía la tabla.

Por alguna razón, en Flask, aparentemente, los archivos de la plantilla externa se cargan antes que los archivos de las tablas de arriba en la jerarquía (los que está ampliando), por lo que JQuery se cargaba antes que los archivos de DataTables que causaban el problema.

Tuve que crear otra plantilla donde ejecuto todas mis importaciones de JS CDN en el mismo lugar, eso resolvió el problema.

Daniel Herrera
fuente