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.

IMPORTANTE: No es compatible con columnas render (punto 7) ver los dos ejemplos abajo.

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.
Para que el desplegable aparezca en un número que no sea el primero (default) pageLength: xx, donde xx es uno de los valores del array lengthMenu.

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.
Por default se ordena por la columna 0 para forzar el orden por otra columna va por ejemplo: order: [[1, "asc"]] se ordenará por la clolumna 1 ascendente, para ordenar por varias order: [[1, "asc"],[3, "desc"]] se ordena primero por la 1 ascendente y luego la 3 descendente.

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.

7) Ancho y visibilidad de las columnas (Width)

Si no se explicita el ancho está dado por el contenido. si queremos forzar los anchoa manualmente debe ir en la parte general autoWidth: false, y luego en cada columna de columnDefs: el ancho como % width: 'xx%' asegurando que quede en total 100%.
Si necesitamos una columna no visible en columnDefs: le ponemos visible:false, ojo en thead debe ir un <th> por cada columna no visible en el lugar correspondiente a la definición de campos en columns: ( que es por supuesto el N° de orden en columnDefs.)

7) Campos que no provienen de la base de datos (Íconos, botones, inputs)

Los campos a agregar pueden ser cualquier objeto html en el formato:
   {"render": function () {
      return " OBJETO HTML"
   }},

OBJETO HTML (ejemplos):

Fa fa icon: <i class='fa fa-info-circle fa-lg' aria-hidden='true' style='color:blue; cursor:pointer' id='info'></i> Input: <input type='text' style='width:30px;' class='cantidad'> Botón: <input type='button' style='width:30px;' class='cantidad'/> Imagen: <img src='xxxx.jpg' class='alguna' />

El aspecto de estos objetos los modificamos por style, o mejor con class para no embrollar la codificación.

						
1) Script JAVASCRIPT  AJAX


<script > 
	$(document).ready( function () {
	// inicializo tabla	
    var tabla = $('#mitabla').DataTable({
		//responsive: true,					// 1) tabla adaptativa
		lengthMenu: [						// 2) items del menú N° de páginas
			[4, 6, 10, -1],
			[4, 6, 10, 'Todos']
   		 ],
		language: {							// 3) cambiar el idioma
        	url: '../scripts/es-ES.json',
    	},
		layout: {							// 4) cambiar la posición (layout) de los controles
			top2End: 'search',
			topEnd: {
				paging: {
                	numbers: 6
           		 }
        	},
			bottomEnd: {
				paging: {
					numbers: 6
				}
        	},
   		},
		ordering: true,				// 5) true se pueden ordenar todas, false ninguna
		columnDefs: [
			{
				targets: 0,			// 6) Estilo para alguna columna particular sin encabezado
				className: 'primera'
			}
			{
				targets: 3,
				orderable: false	// 5) la 3° columna no se puede ordenar (input)
          	},
			{
				targets: 4,
				orderable: false	// 5) la 4° columna no se puede ordenar (button)
          	},
			{
				targets: 5,
				orderable: false	// 5) la 5° columna no se puede ordenar (fa fa icon)
          	},	
			{
				targets: '_all',	// 6) Estilo para todas las columnas
				className: 'todos'
			},

  		],
		  ajax: {
        	url: 'tec-php-datatableaspecto-procesar.php?accion=cargar',
			dataSrc:''
    	},
		columns: [
       		{ data: 'id' },
    	    { data: 'nombre' },
       		{ data: 'direccion' },
			{"render": function () {													// 7 columnas especiales
				return ""
			}},
			{"render": function () {
				return ""
			}},
			{"render": function () {
				return ""
			}}, 
			{ data: 'mail' },
        	{ 							//6) Estilo para alguna columna particular y encabezado			
				data: 'fecha_nac',
				className: 'todos primera'
			}

	   ]
	});
} );

</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
	}
?>