En este caso los archivos necesarios son (versión 2.0.2), (Layout recién funciona en esta versión):

• jquery-3.6.4.min.js
• dataTables.min.js
• dataTables.responsive.min.js (para adaptativa)
• dataTables.min.css
• responsive.dataTables.min.css (para adaptativa)

Para obtener los archivos,sea de cdn directamente o bajarlos al server, Click aquí

Para usar Y CARGAR la datatable ver primero: CARGAR DATATABLE

1) Tabla adaptativa

Para que la tabla sea adaptativa además de los archivos señalados más arriba debo agregar: responsive: true, y la tabla debe tener style="width:100%"
Cuando las columnas ya no entren (se estrechan primero sea adaptativa o no) aparece una flechita horizontal que al clicar hace aparecer debajo la data que falta.

2) N° de items en el menú de registros

Para cambiar el default va: lengthMenu: [[2, 4, 25, -1],[2, 4, 25, 'Todos']], el primer array indica el N° de registros mostrados (-1 es todos) el 2° es optativo y son las etiquetas que muestra el desplegable.

3) Cambiar el idioma (a español en particular)

Para cambiar el idioma va: language: {url: '../scripts/es-ES.json',}, donde el archivo .json contiene todas las variables y su traducción. La ventaja de descargarlo y no usar el cdn es que podemos modificarlo a gusto.
Para ver detalles del plug-in: Click aquí


4) Manejo del layout (posición de info, buscador, paginado y N° de registros)

Los detalles de la grilla DOM y los valores en VER GRILLA
Los valores por default de Layout son:

• topStart: 'pageLength',
• topEnd: 'search',
• bottomStart: 'info'
• bottomEnd: 'paging'

Si queremos sobreescribir una posición la anterior desaparece (por ejemplo paginar arriba derecha además de abajo) ponemos topEnd: { paging: {numbers: 6}}, y para dejar solo 5 N° en el paginado inferior bottomEnd: {paging: {numbers: 6}}, (recordar que con 6 aparecerá 1 2 3 4 ... 10) por ejemplo, cuenta "..." y el "último".

5) Ordenar las columnas

Para controlar si todas las columnas van a poder ordenarse (con el iconito de triangulitos) se controla con ordering: true, false no se ordena ninguna, true todas.
para deshabilitar el orden de algunas columnas usamos columnDefs: [{ targets: 4, orderable: false }], esto hará que la 5° columna (la numeración empieza en cero) no sea ordenable.

6) Estilos en las columnas (font-size, color, etc.)

Por css definimos las clases con las propiedades que queremos en las columnas (El nombre de las mismas tomará el estilo correspondiente a la columna si modidicamos con ) luego en columnDefs:

• Para todas las columnas: {targets: '_all',className: 'todos'},
• Para una en particular (sin encabezado): {targets: '0',className: 'primera'},
• Para una en particular (con encabezado): va en columns {data: 'fecha_nac',className: 'todos primera'}

Aclaración: en el último caso van las dos clases separadas por un espacio para que se apliquen ambas secuencialmente, al poner una clase en columns elimina todas las puestas en columnDefs.

						
1) Script JAVASCRIPT  AJAX


<script > 


</script > 



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 0,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
	}
?>