DataTable: Aprende a Mostrar y Gestionar Datos Eficazmente en tus Aplicaciones Web

En este tutorial, exploraremos cómo utilizar DataTable para mostrar y gestionar datos de manera eficiente en tus aplicaciones web. Aprenderás a integrar DataTable en tu proyecto, configurar columnas, aplicar filtros y paginación, y personalizar la visualización de datos para mejorar la experiencia del usuario. Con ejemplos prácticos y técnicas avanzadas, descubrirás cómo aprovechar al máximo DataTable para crear tablas interactivas y dinámicas que faciliten la gestión y presentación de información. ¡Optimiza tu manejo de datos y lleva la funcionalidad de tus tablas al siguiente nivel con DataTable!
#datatable
#php
#jquery
👉 Código github.com/dan...
👉 Sitio oficial de datatable datatables.net/
👉 CDN Bootstrap getbootstrap.c...
👉 CDN JQuery cdnjs.com/libr...
👉 CDN Font Awesome cdnjs.com/libr...
// *****************************************************************************************************
☕ Un café paypal.me/dspr...
📷 Sigueme en instagram / soydani_code

[@nenothespider]

excelente explicacion, segui tu tutorial al paso y salio de maravilla, gracias por compartir tus conocimientos, saludos😁😁😁

[@Dani-Code]

Un gusto, neno! Slds!

[@Benito-MExcel]

Hola Dani, soy nuevo suscriptor y vengo de Vba. Me fascina este nuevo mundo. Ya le iré comentando, Saludos y excelente 👍

[@Dani-Code]

Hola Benito! Me alegro que el contenido te sea útil. Slds!

[@aqgarnica]

La mejor explicación de datables, gracias

[@Dani-Code]

Gracias 😀

[@JoaquinGCortes]

Un video estupendo. Listo para empezar a usar datatables. Muy bien explicado. Gracias!!

[@Dani-Code]

Excelente!

[@barmass5037]

De lo mejor que he visto

[@Dani-Code]

Gracias Ivan

[@diegovallejos422]

Gracias desde Argentina!

[@Dani-Code]

🙂

[@jadovi]

Jquery sigue vivo y fue actualizado a su version 4, muy usado en Wordpress con elementor. Muy pero muy vivo aun.

Excelente aportación Daniel, puedes hacer un video de un proyecto completo como este pero con conexión con una hoja de Google Sheet? e lo agradecería mucho, Felicidades buen trabajo.

[@Dani-Code]

Hola! Me alegro que el contenido te sea útil. Tomaré tu sugerencia para futuros tutoriales. Slds!

[@ivkanian]

Hacete un cursito de TS

[@JorgeCastro92]

gracias por el curso, aunque actualmente dataTables ya no otorga el código con Jquery, sino con vanilla js, por lo que es perfecto para su uso con React, Vue, y otras librerías 🤔 PD: Active el Office por favor jajaja

[@Dani-Code]

🤪

[@javieralvarez5169]

Dani muchas gracias por el video muy buena explicacion y util tenes algo con esta herramienta hecha para un negocio saludos y muchas gracias

[@Dani-Code]

Un poco tarde... Mas adelante pienso hacer un curso en el canal de un sistema de stock donde aplicare este y muchos otros conocimientos. Slds!

[@AdolfoCarlosLopez]

Buenas noches, hice los cambios a un html de empadronamiento pero no logro visualizar lo paginacion, buscador y el show entries sugerencias por favor gracias

[@Dani-Code]

Hola Adolfo, incluye el script de jquery y datatable en ese nuevo html y verifica el id de la tabla donde se va a renderizar

[@MatiasSanchez-n2s]

hola Daniel, impecable el tutorial, me ayudo un montón a entender un poco mas todo el potencial que tiene... solo me queda una duda, que es en la parte de estado, para el ejemplo usaste un icono pero me gustaría saber como podría implementar un condicional if para que ese icono se muestre según el estado que tengo guardado en mi base de datos... yo la estoy intentando usar para reemplazar una tabla que tengo armada con django pero js no se me da muy bien todavía desde ya muchas gracias...

[@Dani-Code]

Hola! Como necesitas consultar en tu base de datos si un dato esta en true o false entonces, necesitas consumir una api que te de ese valor que tienes en la base o usar un lenguaje del backend (como nodejs por ejemplo) para conectarte a la base y consultar ese dato y llevartelo al frontend para mostrarlo (algo parecido a lo que hicimos con la api de json placeholder) slds 🤙

[@jesuslazo3030]

Gran explicación y muy detallada Daniel, sin embargo quisiera saber cómo puedo tener los botones para mostrar la cantidad de registro por pantalla a la misma altura o al lado de los botones de Exel, Pdf e Imprimir. Inicialmente estaba arriba pero luego se puso en la parte inferior. Saludos

[@Dani-Code]

Hola Jesus! En este diseño que usamos para este ejemplo efectivamente los tira para abajo. Habria que ubicar el diseño de datatable que se ajuste a tu necesidad o diseñar esa sección de manera manual. Slds!

[@mikkeangel6296]

Hola buenas, tengo una base de datos en PostgreSQL, como seria el procedimiento para poder mostrarla en esta Datatable, no se como conectarla a la base de datos

[@Dani-Code]

Hola! Te sugiero utilizar una conexión con PDO. En mi canal encontraras una lista de php y mysqli y en los primeros videos explico como conectar una base de datos con php. En este caso explico el curso con una base de datos mysql pero con postgrest es ligeramente diferente. Slds!

[@BrianCodeInt]

Muy Bueno Tu Video Bro, me ayudaste un Monton Ojala sigas Compartiendo contenido asi de una manera muy practica, Saludos!!, Me podrias decir que tema Usas?

[@Dani-Code]

Hola Brian! Me alegro que el contenido te sea útil, uso la extensión AYU y su tema ayu dark bordered. Slds!

[@victorcuauro7110]

hola amigo muy bueno el video a cada detalle. Pudiera hacer cuando se requiere hacer desde una base de datos?

[@Dani-Code]

Hola Victor, si claro! En lugar de traer la data de la api, la traes directamente de la base datos.

[@santiorojuega687]

Muy buen video! Muy bien explicado! Pero cuando trato de tener dos tablas en la misma pagina no me deja, solo funciona una, qué es lo que tengo que cambiar para que pueda tener dos tablas? Ya que quiero una para usuarios y otra para productos

[@Dani-Code]

Hola Santi, debes programar un poco... Añade una segunda tabla en el HTML con un nuevo id para la segunda tabla, luego modifica la función listUsers para aceptar un segundo parámetro, que será el id de la tabla en la que deseas insertar los datos, luego llama a la función listUsers dos veces, una vez para cada tabla y por último crea un segundo objeto para la segunda tabla e iniciala como iniciamos a la primera. Espero te ayude. Slds!

[@oraliarivera3125]

buenas tardes muchas gracias muy bien explicado... disculpa podrías ayudarme a como se conecta con una bd mysql... te lo agradecería mucho

[@Dani-Code]

Hola! Debes usar un lenguaje del backend (como nodejs por ejemplo) de esa manera te podrias traer la data de la base y mostrarla en el frontend. Slds 🤙

[@oraliarivera3125]

@@Dani-Code muchas gracias muy amable en responder...

[@aranasoftware]

profe excelente viedo he aplicado todo lo que enseñas aca en este video solo que quisiera poder cambiar la orientacion de la pagina en horizontal y darle un tamaño personalizado a las columnas como pudiera hacer

[@Dani-Code]

Hola aranasoftware! EL diseño esta hecho con bootstrap, puedes jugar un poco con las clases del contenedor de las columnas o directamente con clases en las columnas. También puedes sacar bootstrap y trabajarlo con diseño propio y media queries Espero te ayude! Slds!

[@aranasoftware]

@@Dani-Code profesor disculpe no me supe explicar en cuando género el reporte PDF sale en vertical y mi tabla tiene mas campos y es horizontal que seción debo modificar en pdfmaker para lograr la orientación y el tamaño de las columnas

[@aranasoftware]

o si puede subir un video al respecto

[@luismiguelportoesquivel4320]

Hola Daniel, gracias por compartir tus conocimientos, todo muy bien explicado, he tratado de realizar el paso a paso pero me quede en un paso porque al pegar el código en el "script.js" me dice que la variable $ no esta definida, me podrías ayudar por favor? $(document).ready(function () { $('#example').DataTable() })

[@Dani-Code]

Hola Luis! Tienes instalado y enlazado correctamente jquery?

[@nehomarjosegoyogimenez2944]

hermnao como podria mantener algul filtro y que no se pierda al actualizar la pagina..porque tengo un template uqe cargo los datos y los actualizo por medio de un modal..pero al guardar me actualiza la pagina y pierdo los filtros...alguna idea de como solucionarlo...lo estoy haciendo en django

[@Dani-Code]

Nehomar, podrias capturar ese evento cuando presionas guardar y evitar que la pagina se recargue

[@jazo2212]

Hola estimado, podrías hacer un video de DataTables pero importando registros de un archivo Excel y con esos registros en el DataTables también que se muestre en un grafico. Ese tipo de videos todavía no se observa en KZbin. Gracias

[@Dani-Code]

Tomado en cuenta estimado!

[@jazo2212]

@@Dani-Code para cuando será? porque eso nadie lo a realizado en KZbin, debe ser tan complicado?

[@hugomunozmoya4642]

Excelente video, pero te tengo una consulta... tengo un datatable con n datos que estan totalizados, tiene nombre vendedor, total locales, total ordenes de compra.. ahora quiero agregar otro datatable dentro de este que muestre el detalle de la orden de compra, si puedes orientarme se agradeceria

[@Dani-Code]

Hola Hugo! Puedes utilizar un componente desplegable para mostrar los detalles adicionales Código ejemplo de HTML Nombre Vendedor Total Locales Total Órdenes de Compra Nombre1 10 5 Nombre2 8 3 Código ejemplo JS // Configurar el DataTable principal $(document).ready(function () { var mainTable = $('#dataTable').DataTable(); // Configurar eventos para expandir/desplegar detalles $('#dataTable tbody').on('click', 'tr', function () { var tr = $(this); var row = mainTable.row(tr); var detailsId = tr.data('details-id'); // Toggle para mostrar/ocultar detalles if (row.child.isShown()) { // Ocultar detalles si ya están mostrados row.child.hide(); tr.removeClass('shown'); } else { // Mostrar detalles utilizando una función personalizada (ver más abajo) showDetails(row.child, detailsId); tr.addClass('shown'); } }); }); // Función para mostrar detalles en una tabla interna function showDetails(container, detailsId) { // Puedes cargar los datos para el DataTable de detalles aquí según el detailsId // Por ejemplo, puedes hacer una solicitud AJAX para obtener los detalles // Ejemplo de DataTable para detalles var detailsTable = $(''); container.html(detailsTable); detailsTable.DataTable({ // Configuración y datos para la tabla de detalles // ... }); // Puedes personalizar cómo se obtienen los datos para los detalles según el detailsId // y cargarlos en la tabla de detalles. } Cuando haces clic en una fila, se muestra u oculta una tabla de detalles con órdenes de compra asociadas. Puedes personalizar la función showDetails según tus necesidades y cargar los datos de detalles de manera dinámica. Asegúrate de incluir las bibliotecas jQuery y DataTables en tu proyecto para que este código funcione correctamente. Saludos!

[@hugomunozmoya4642]

Muchas gracias@@Dani-Code... te agradezco la respuesta....

[@jcsegura6541]

muy facil de implementar en jquery , pero en vue js 3 no encuentro ejemplos en la web

[@Dani-Code]

Tomado en cuenta 🤙

[@barmass5037]

Daniel, muchas gracias. Por favor, con DataTable Jquery, python, mysql y sqlAlchemy se puede hacer un crud?. De ser posible, podrìas considerar un video?

[@Dani-Code]

Hola Ivan! Tomado en cuenta para futuros tutoriales. Slds!

[@davidmoraquintero2727]

Hola Dani, te agradezco enormemente tú video, me fue de mucha utilidad. Te hago una pregunta, cree un DataTable integrado con Sheets, sabes como puedo hacer que detecte el correo electronico y con este aplique un filtro y solo le renderice la información asocida a este email? mil gracias

[@Dani-Code]

Hola David! Me alegro que el contenido te sea útil. Nunca he hecho eso que me planteas pero yo lo abordaria haciendo una query que busque el email en los registros devueltos inicialmente y luego otra query con todos los registros que pertenezcan a ese email. Slds 🤙

[@brendam7609]

como hacer que en pdf tenga la imagen porq he realizado pero no me imprime

[@Dani-Code]

Hola brenda, disculpa no comprendi bien la pregunta

[@jonnielmedina6065]

Exelente explicación bro. Una pregunta, como puedo imprimir o exportar en pdf o excel solo los registros que yo busque en imput de busqueda? O solo los que se muestras en la tabla actualmente.

[@jonnielmedina6065]

Xq imagínate que tenga 6000 mil registros. Cuantas hojas no me van a salir... Solo imprima la búsqueda

[@Dani-Code]

Hola Jon! Te recomiendo usar librerias externas como fpdf que te pueden ayudar con lo que necesitas! Slds 🤙

[@Oprekode]

good tutorial

[@luisalbertocastillocortez1755]

Pregunta, se pueden usar base de datos de MySQL?

[@brandopinto5655]

Sí se puede

[@Dani-Code]

Hola Luis! Si claro! Slds 🤙

[@sniperstark4132]

Cómo agregaste los botones para poder editar AYUDA

[@Dani-Code]

Un poco tarde... Espero lo hayas solucionado, igual en el video lo muestro... Slds!

[@Juana-l2z]

BUeno , lastima que no tiene para agregar usuarios.

[@Dani-Code]

En ese caso necesitas un CRUD, te dejo un link kzbin.info/www/bejne/l4qppn-mm9iDmNU

[@nehomarjosegoyogimenez2944]

me quede con las ganas de ver como le colocabas el response..

[@Dani-Code]

Hola Nehomar! Cómo así? 🤔

[@nehomarjosegoyogimenez2944]

gracias hermano ..te preguntaba el response para dispositivos móviles...pero ya lo hice...gracias hermano...

[@nehomarjosegoyogimenez2944]

lo que sucedió es que estaba enredado en el orden de como se colocan los js ..por eso no me aparecía el response como era...

[@lord-virus]

puedo utilizar fetch api, en vez de ajax>?

[@Dani-Code]

Si, sin ningún problema!

[@lord-virus]

@@Dani-Code Y como puede cambiar el color de la paginacion, osea los botones de la paginacion?

[@armandomarquez9447]

Muy buena explicación.... Una pregunta... algun numero de whtasapp para hacerte una consulta? Gracias