CARGAR DATATABLE CON CAMPOS DIRECTOS O PROCESADOS(AJAX)
Para usar la datatable es necesario primero incluir los scripts y css.(estos son de la versión -1.10.18
versiones posteriores pueden cambiar ed nombres, pero en esencia son estos)
Además crear la carpeta DataTables-1.10.18 si estamos en esa versión, subcarpeta images y copiar las imágenes de las flechitas.
Luego en el body ponemos una tabla, con id (en este caso mitabla) y obligatoriamente de la clase display, por ejemplo:
<table id="mitabla" class="display"> y dentro solo la cabecera con thead las columnas con th (ver código html).
Ahora por jquery inicializamos la tabla con una función donde determino primero el aspecto general en: $.extend( $.fn.dataTable.defaults, {........} ); con opciones como:
Ahora cargamos los valores desde la base de datos por AJAX (ver el link "Ver código script PHP-AJAX" abajo para el código PHP de devolución.
var tabla = $('#mitabla').DataTable({.......} ); Acá hay dos secciones obligatorias:
Si hay que preprocesarlos debemos generar un substring con las claves que recibirá el ajax, también aquí es cómodo mantener las claves de la tabla (ver código)
- 'jquery-x.xx.x.min.js'
- 'bootstrap.min.js'
- 'datatables.min.js'
- 'bootstrap.min.css'
- 'datatables.min.css'
Además crear la carpeta DataTables-1.10.18 si estamos en esa versión, subcarpeta images y copiar las imágenes de las flechitas.
Luego en el body ponemos una tabla, con id (en este caso mitabla) y obligatoriamente de la clase display, por ejemplo:
<table id="mitabla" class="display"> y dentro solo la cabecera con thead las columnas con th (ver código html).
Ahora por jquery inicializamos la tabla con una función donde determino primero el aspecto general en: $.extend( $.fn.dataTable.defaults, {........} ); con opciones como:
- searching: true,
- ordering: true,
- columnDefs: [{targets: 0,className: 'dt-body-center'}]
Ahora cargamos los valores desde la base de datos por AJAX (ver el link "Ver código script PHP-AJAX" abajo para el código PHP de devolución.
var tabla = $('#mitabla').DataTable({.......} ); Acá hay dos secciones obligatorias:
- ajax: { }, con la llamada al script que devuelve el JSON data en url:(detalles en AJAX )
- La sección columns: [{ data: 'xxx1' },{ data: 'xxx2' }...]); con un subitem por columna definida en el thead.
Si hay que preprocesarlos debemos generar un substring con las claves que recibirá el ajax, también aquí es cómodo mantener las claves de la tabla (ver código)
1) Script JAVASCRIPT AJAX
<head>
<script src="../scripts/jquery-3.6.4.min.js"> </script>
<script src="../scripts/bootstrap.min.js"> </script>
<script src="../scripts/datatables.min.js"> </script>
<script src="scripts/dataTables.responsive.min.js" > </script>
<LINK href="../css/estilos.css" type=text/css rel=StyleSheet >
<LINK href="../scripts/bootstrap.min.css" type=text/css rel=StyleSheet>
<LINK href="../scripts/datatables.min.css" type=text/css rel=StyleSheet>
<LINK href="scripts/jquery.dataTables.min.css" type=text/css rel=StyleSheet>
<title>DATATABLE, MANEJO</title>
<script>
$(document).ready( function () {
// defaults para todas las tablas
$.extend( $.fn.dataTable.defaults, {
searching: true,
ordering: true,
columnDefs: [
{
targets: 0,
className: 'dt-body-center'
}
]
} );
// inicializo tabla
var tabla = $('#mitabla').DataTable({
ajax: {
url: 'tec-php-preprocesardatatable-procesar.php?accion=cargar',
dataSrc:''
},
columns: [
{ data: 'id' },
{ data: 'nombre' },
{ data: 'direccion' },
{ data: 'mail' },
{ data: 'fecha_nac' }
]
});
} );
</script >
</head>
2) HTML
<div style="padding-top:20px;"> <!-- contenedor-->
<div class="recuadro">
<table id="mitabla" class="display">
<thead>
<tr>
<th> id </th>
<th> NOMBRE </th>
<th> DIRECCION </th>
<th> EMAIL </th>
<th> NACIMIENTO </th>
</tr>
</thead>
</table>
</div> <!-- fin contenedor tabla -->
</div> <!-- fin contenedor -->
3) Script PHP
<?php
include("conexion.php"); // abre la conexión a la base de datos
global $conn; //lo usamos en conexion, lo declaramos acá para no llamar siempre a $GLOBALS[]
$accion= $_GET["accion"];
Switch ($accion){
case "cargar":
$test= array();
//echo ("inicio
"); //borrar
if(conectar()){
$sqltxt = "SELECT id,nombre,direccion,mail,fecha_nac FROM clientes LIMIT 1,100";
$sqldevolucion = mysqli_query($conn,$sqltxt);
if (!mysqli_num_rows($sqldevolucion)) {
echo("error, no se devuelven registros");
} else {
while ($r = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC)){
// $test[] = $registro; // agrego a test[] cada registro como sub-array sin procesar
$id = $r["id"];
$nombre = strtoupper($r["nombre"]);
$direccion = ucfirst($r["direccion"]);
$mail = $r["mail"];
$fecha_nac = substr($r["fecha_nac"],8,2)."/".substr($r["fecha_nac"],5,2)."/".substr($r["fecha_nac"],0,4);
$test[] = array("id" =>$id,"nombre" => $nombre,"direccion" => $direccion,"mail" => $mail,"fecha_nac" => $fecha_nac);
} // fin while
echo json_encode($test); // lo paso a json y lo exporto
mysqli_free_result($sqldevolucion); //devuelvo recurso a memoria
mysqli_close($conn); // cierro conexion
}
}else{
echo(mysqli_error($conn));
} //fin if conectar
break;
// fin de CARGAR
}
?>