Búsqueda de sitios web

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

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

Descargué la biblioteca completa desde la misma fuente. Todos los ejemplos que vienen en el paquete parecen funcionar bien, pero cuando intento incorporarlos en mis WebForms, el CSS y el JS no funcionan en absoluto.

Aquí está 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>

La estructura de archivos para el JS y CSS en mi solución se ve de la siguiente manera:

He agregado todas las referencias necesarias de JS y CSS como se muestra en el manual. Aún así, la representación no es la esperada. No hay CSS e incluso el 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 o así) y aun así no funciona.

¿Alguien puede guiarme en la dirección correcta para este problema?

Respuesta #1

CAUSA

Podría haber múltiples razones para este error.

  • Falta la biblioteca jQuery DataTables.
  • La biblioteca jQuery se carga después de jQuery DataTables.
  • Se carga múltiples versiones de la biblioteca jQuery.

SOLUCIÓN

Incluya solamente una versión de la biblioteca jQuery versión 1.7 o más reciente antes de 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>

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

Respuesta #2

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

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

Respuesta #3

Recibí este error porque descubrí que referencié jQuery dos veces.

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

Si estás usando ASP.NET MVC, este fragmento podría ayudarte

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

Respuesta #4

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

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

Solución utiliza $.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>

Respuesta #5

Aquí está el conjunto completo de JS y CSS requerido para que el plugin 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 :-

Respuesta #6

El mismo error ocurre al trabajar con DataTables en un proyecto de Laravel. Incluso si se prueban las siguientes soluciones, el error sigue presente:

  1. asegurándose de que jQuery esté incluido
  2. incluir jQuery antes de incluir los DataTables
  3. asegurándose de que solo se agregue una versión de jQuery

Para eliminar el error, después de asegurarse de que se cumplen las condiciones anteriores, agregue "defer" a la etiqueta que incluye los DataTables. Por ejemplo,

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>

Respuesta #7

Puede haber dos razones para ese error:

Primero

Estás cargando jQuery.DataTables.js antes de jquery.js, así que por eso :-

Necesitas cargar jQuery.js antes de cargar jQuery.DataTables.js

Segundo

Estás usando dos versiones de jQuery.js en la misma página, así que para eso :-

Intenta usar la versión más alta y asegúrate de que ambos enlaces tengan la misma versión de jQuery

Artículos relacionados