20 Como Configurar DATATABLES en ESPAÑOL en LARAVEL(PHP-MySql) FullStack

Duración: 8 min
Módulo: 👤 CRUD de Usuarios y UX Avanzada Lección 12 de 17

Descripción

🌐 Lección 20: Configuración de DataTables en Español y Diseño de Acciones

Título del Video: 20 Como Configurar DATATABLES en ESPAÑOL en LARAVEL (PHP-MySql) FullStack

Esta lección se centra en la internacionalización de la librería DataTables y en el refinamiento visual de la columna de acciones de la tabla de usuarios.

1. 🇪🇸 Traducción de DataTables al Español

El primer paso es corregir la inconsistencia de tener un sistema en español con una tabla que muestra elementos de interfaz en inglés (como "Search," "Showing X of Y," "Next," "Previous") [00:41].

  • Problema: La configuración predeterminada de DataTables es en inglés.
  • Solución: Se reemplaza el script de inicialización simple de DataTables por uno más completo que incluye la configuración del idioma. Este script contiene un objeto de JavaScript con todas las cadenas de texto necesarias para la traducción, asegurando que todos los elementos (como el campo Buscar, los mensajes de Mostrando X de Y, y los botones Anterior y Siguiente) se muestren correctamente en español [01:18].

2. 🎨 Diseño Profesional de Botones de Acción

Una vez que la tabla está traducida, se mejora el diseño de los botones de acción para "Ver," "Editar," y "Borrar" utilizando las utilidades de Bootstrap.

  • Agrupación: Se utiliza el componente Button Group de Bootstrap para agrupar los tres botones en una sola unidad compacta, mejorando la estética de la fila [04:01].
  • Colores Semánticos: Se asignan colores de Bootstrap para indicar la naturaleza de cada acción, lo que ayuda a la claridad visual:
    • Ver (View): Se utiliza el color Info (azul).
    • Editar (Edit): Se utiliza el color Success (verde).
    • Borrar (Delete): Se utiliza el color Danger (rojo), apropiado para una acción destructiva [04:47].
  • Tamaño Compacto: Se aplica la clase btn-sm (small button) para reducir el tamaño de los botones, haciéndolos más adecuados para una tabla [05:14].
  • Uso de Iconos: Los textos originales de los botones ("Ver," "Editar," "Borrar") se reemplazan por iconos de Bootstrap (un ojo, un lápiz y un bote de basura, respectivamente) para hacer la columna más compacta y universalmente comprensible [05:38].

El resultado final es una columna de acciones visualmente atractiva, bien organizada y con indicadores claros para cada operación.