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
Datatables js
da problemas si usasthead
ytbody
, intenta con<tr>
directo