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

Un gusto, neno! Slds!

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

Gracias 😀

Excelente!

🙂

Gracias Ivan

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

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

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

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!

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 🤙

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 🤙

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!

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

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!

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

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

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

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

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 🤙

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

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!

Si, sin ningún problema!

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

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

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!

Hola Luis! Tienes instalado y enlazado correctamente jquery?

Sí se puede

Hola Luis! Si claro! Slds 🤙

🤪

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

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!

@@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

o si puede subir un video al respecto

Hola brenda, disculpa no comprendi bien la pregunta

Tomado en cuenta 🤙

Tomado en cuenta estimado!

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

En ese caso necesitas un CRUD, te dejo un link ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-aYFuLpfsPbs.html

Hola Nehomar! Cómo así? 🤔

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

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...