0

Buen día, estoy realizando un proyecto personal y realmente soy nuevo en esto, queria usar el plugin de datatable pero se presento un problema en mi código ya que al tratar de usar Data tables no me funcionan y me muestra los siguientes errores en pantalla no se si es por la versión de jquery o simplemente no estoy implementando de manera correcta la datatable: Aqui el error

 jquery-3.6.0.min.js:2 jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined
    at HTMLTableCellElement.<anonymous> (https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js:119:137)
    at Function.each (http://code.jquery.com/jquery-3.6.0.min.js:2:3003)
    at S.fn.init.each (http://code.jquery.com/jquery-3.6.0.min.js:2:1481)
    at HTMLTableElement.<anonymous> (https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js:119:90)
    at Function.each (http://code.jquery.com/jquery-3.6.0.min.js:2:3003)
    at S.fn.init.each (http://code.jquery.com/jquery-3.6.0.min.js:2:1481)
    at S.fn.init.u [as dataTable] (https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js:112:13)
    at S.fn.init.k.fn.DataTable (https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js:196:292)
    at HTMLDocument.<anonymous> (http://localhost/personal/Vista/Ingresos/ingreso_principal.php?id_ingreso=44:156:20)
    at e (http://code.jquery.com/jquery-3.6.0.min.js:2:30038) undefined
S.Deferred.exceptionHook @ jquery-3.6.0.min.js:2
jquery-3.6.0.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined
    at HTMLTableCellElement.<anonymous> (datatables.min.js:119)
    at Function.each (jquery-3.6.0.min.js:2)
    at S.fn.init.each (jquery-3.6.0.min.js:2)
    at HTMLTableElement.<anonymous> (datatables.min.js:119)
    at Function.each (jquery-3.6.0.min.js:2)
    at S.fn.init.each (jquery-3.6.0.min.js:2)
    at S.fn.init.u [as dataTable] (datatables.min.js:112)
    at S.fn.init.k.fn.DataTable (datatables.min.js:196)
    at HTMLDocument.<anonymous> (ingreso_principal.php?id_ingreso=44:156)
    at e (jquery-3.6.0.min.js:2)

Este es el código:

    <!DOCTYPE html> 
<html>
<head>
    <title>Dashoboard</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css_vista/estilo_dashboard.css">
    <link rel="stylesheet" href="../css_vista/estilo_3.css">
    <link rel="stylesheet" href="../css/fontello.css">
    <link rel="stylesheet" href="../css_vista/actualizar_estilo.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>

</head>
<body>
    
    <header class="header">
        <div class="container">
            <div class="btn-menu">
                <label for="btn-menu" class="icon-menu"></label>
            </div>
            <div class="logo">
                <h1>Tu cartera</h1>
        </div>
        </div>
    </header>
    <input type="checkbox" id="btn-menu">
    <div class="container-menu">
        <div class="cont-menu">
            <nav>
                <a href="../Vista/inicio.html">Inicio</a>
                <button type="button" id="">Ingresos</button>
                <a href="#">Actualizar información</a>
                <a href="#">Soporte</a>
            </nav>
            <label for="btn-menu" class="icon-cancel"></label> 
        </div>
    </div>
    </body>
</html>
<?php
    include("../../controlador/conectar.php");
    // mostrar datos
    $ingresos = "SELECT id_ingreso,nombre_ingreso,valor_ingreso,Descripcion_ingreso,fecha_ingreso FROM ingresos";
    // Hacer suma de los ingresos
    $SUM="SELECT SUM(valor_ingreso) FROM ingresos";
            $resultado = mysqli_query($conn, $SUM);
            $TotalSuma=$resultado->fetch_assoc();
?>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mostrar datos</title>
</head>
<body>
    <div class="table_container"  id="table_container">
        <button id="mostrar_agregar">Añadir</button>
    <table class="display tabla" id="tabla_id">
        <thead>
            <tr class="edit_table"> 
                <th>Nombre del ingreso</th>
                <th>Valor</th>
                <th>Descripción del ingreso</th>
                <th>Fecha del ingreso</th>
                <th colspan="2">Acciones</th>

            </tr>
            </thead>
            <tbody>         
            <?php
              $resultado = mysqli_query($conn,$ingresos);
                while($row=mysqli_fetch_assoc($resultado)){?>
            <tr  class="edit_table_2">
                <td><?php echo $row["nombre_ingreso"]; ?></td>
                <td><?php echo $row["valor_ingreso"]; ?></td>
                <td  class="descri"><?php echo $row["Descripcion_ingreso"]; ?></td>
                <td><?php echo $row["fecha_ingreso"]; ?></td>
                <td >
                    <a class="links" id="actualizar_ingreso" href="ingreso_principal.php?id_ingreso=<?php echo $row["id_ingreso"] ?>">Editar</a>
                    <a class="links_2" id="eliminar_ingresos" href="../../controlador/ingresos/eliminar.php?id_ingreso=<?php echo $row["id_ingreso"] ?>">Eliminar</a>
                </td>
            </tr>
        <?php
         } mysqli_free_result($resultado);  
        ?>
        <td class="filaSuma" colspan="5">Total ingresos:  <?php 
            foreach ($TotalSuma as $total) {
             echo $total, "\n";
            }
         ?></td>
         </tbody>
    </table>
    </div>
    <!-- Formulario_modal_agregar_ingreso -->
    <nav  class="formulario_agregar" id="formulario_agregar">
        <form  action="../../controlador\ingresos\mostrar_ingreso.php" method="post" autocomplete="off" class="contact" id="contact" name="formulario">
            <br>
            <div class="form__ingreso" id="grupo__nombre" >
                <label for="nombre_ingreso" class="form__label">Nombre ingreso</label>
                <div class="form__grupo-input">
                    <input maxlength="30" type="text" class="form__input" name="nombre_ingreso" id="nombre_ingreso">
            </div>
        </div>
            <div class="form__ingreso" id="grupo__valor" >
                <label for="valor_ingreso" class="form__label">Valor ingreso</label>
                <div class="form__grupo-input">
                    <input  maxlength="10" type="text" class="form__input" name="valor_ingreso" id="valor_ingreso">
                </div>
            </div>
            <div class="form__ingreso" id="grupo__descripcion" >
                <label for="Descripcion_ingreso" class="form__label">Descripcion ingreso</label>
                <div class="form__grupo-input">
                    <input type="text" class="form__input" name="Descripcion_ingreso" id="Descripcion_ingreso">
                </div>
            </div>
            <div class="form__ingreso" id="grupo__fecha" >
                <label for="fecha_ingreso" class="form__label">Fecha ingreso</label>
                <div class="form__grupo-input">
                    <input type="date" class="form__input" name="fecha_ingreso" id="fecha_ingreso">
                </div>
            </div>
            <div class="form__grupo-btn">
                    <input type="submit" name="enviar" class="actualizar">
                    <input type="button" value="Cerrar" id="cerrar_agregar">
            </div>
            </form>

    </nav>
    <!-- Modal actualizar ingreso -->
    <?php 
        if (isset($_GET["id_ingreso"])) {
        $id_ingreso = $_GET["id_ingreso"];
        $ingresos_actualizar  = "SELECT * FROM ingresos WHERE id_ingreso='$id_ingreso'";    
     ?>
    <div class="container_update" id="container_update">
    <form action="../../controlador/ingresos/procesar_actualizacion.php" method="post"  class="update" id="update">
            <?php
              $resultado = mysqli_query($conn,$ingresos_actualizar);
            while($fila=mysqli_fetch_assoc($resultado)){?>
                <br>
                <input type="hidden"  name="id_ingreso" value="<?php echo $fila["id_ingreso"]; ?>">
                <label for="nombre_ingreso">Nombre del ingreso</label>
                <br>
                <input type="text"  name="nombre_ingreso" value="<?php echo $fila["nombre_ingreso"]; ?>">
                <br>
                <label for="valor_ingreso">Valor</label>
                <br>
                <input type="text" required="" name="valor_ingreso" value="<?php echo $fila["valor_ingreso"]; ?>">
                <br>
                <label for="Descripcion_ingreso">Descripción del ingreso</label>
                <br>
                <input type="text" maxlength="80"  required="" name="Descripcion_ingreso" value="<?php echo $fila["Descripcion_ingreso"]; ?>">
                <br>
                <label for="fecha_ingreso">Fecha del ingreso</label>
                <br>
                <input type="date" name="fecha_ingreso"  required="" value="<?php echo $fila["fecha_ingreso"]; ?>">
                <br>
        <?php
         } mysqli_free_result($resultado);
        ?>
        <div class="form__grupo-btn">
        <input type="submit" name="enviar" value="Actualizar" class="actualizar">
        <input type="button" value="Cerrar" id="cerrar_actualizar">
        </div>
    </form>
    </div>
     <?php 
        }
      ?>
    <script src="../js/confirmar_eliminar.js"></script>
    <script src="../js/mostrar.js"></script>
    <script>
$(document).ready( function () {
    $('#tabla_id').DataTable();
} );
    </script>
</body>
</html>

Ya trate de diversas formas pero la verdad no he podido dar solución al problema a pesar de que ya he buscado posibles soluciones en foros y vídeos, muchas gracias

4
  • en mi trabajo no puedo ver la imagen, que error te da? el 11 jun. 2021 a las 14:00
  • PD: Recuerdo que Datatables js da problemas si usas thead y tbody, intenta con <tr> directo el 11 jun. 2021 a las 14:01
  • Ya agregue el error como parte del codigo para poder visualizarlo el 11 jun. 2021 a las 14:16
  • Una consulta, te muestra los resultados?, modifique tu código y lo enlace a una base en mi equipo y me muestra resultados, claro si verifico datatable sigue indicando que hay errores.
    – rpaillao
    el 11 jun. 2021 a las 14:54

1 respuesta 1

1

Ese error da cuando el numero de columnas del thead, no es igual al tbody.

<?php
         } mysqli_free_result($resultado);  
        ?>
        <td class="filaSuma" colspan="5">Total ingresos:  <?php 
            foreach ($TotalSuma as $total) {
             echo $total, "\n";
            }
         ?></td>

En este trozo de codigo esta insertando un columna, sin añadir una nueva fila, cambialo por el siguiente:

<?php
         } mysqli_free_result($resultado);  
        ?>
        <tr><td class="filaSuma" colspan="5">Total ingresos:  <?php 
            foreach ($TotalSuma as $total) {
             echo $total, "\n";
            }
         ?></td></tr>

espero te sirva!!

o intenta con esto, ya que no estoy seguro que dataTable funcione con colspan.

<?php
         } mysqli_free_result($resultado);  
        ?>
        <tr><td class="filaSuma" colspan="5">Total ingresos:  <?php 
            foreach ($TotalSuma as $total) {
             echo $total, "\n";
            }
         ?></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td></tr>

Con este codigo, estamos añadiendo la misma cantidad de columnas del thead, pero las ocultamos con style="display: none;"

5
  • Ya probe tu comentario pero aun me muestra errores, no se si tengas otra opción ,Muchas gracias el 11 jun. 2021 a las 14:24
  • Trata de eliminar ese trozo de código y me cuentas, no se si datatable funcione con la propiedad colspan. el 11 jun. 2021 a las 14:29
  • añadi, otro codigo en la respuesta, para que pruebes con ese. el 11 jun. 2021 a las 14:33
  • Ya pude arreglar siguiendo tus consejos muchas gracias el 11 jun. 2021 a las 15:06
  • @SERGIODANIELAYALAORTIZ, si la respuesta te sirvió, no olvides marcarla como aceptada.
    – Triby
    el 11 jun. 2021 a las 16:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.