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.
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 🤙
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...
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 🤙
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
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!
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
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
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!
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
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!
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.
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
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 🤙
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
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
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?
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?
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
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
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
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 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() })
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 UA-cam. Gracias
excelente explicacion, segui tu tutorial al paso y salio de maravilla, gracias por compartir tus conocimientos, saludos😁😁😁
Un gusto, neno! Slds!
Hola Dani, soy nuevo suscriptor y vengo de Vba.
Me fascina este nuevo mundo.
Ya le iré comentando,
Saludos y excelente 👍
Hola Benito! Me alegro que el contenido te sea útil. Slds!
La mejor explicación de datables, gracias
Gracias 😀
Un video estupendo. Listo para empezar a usar datatables. Muy bien explicado. Gracias!!
Excelente!
De lo mejor que he visto
Gracias Ivan
Gracias desde Argentina!
🙂
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.
Hola! Me alegro que el contenido te sea útil. Tomaré tu sugerencia para futuros tutoriales. Slds!
Jquery sigue vivo y fue actualizado a su version 4, muy usado en Wordpress con elementor. Muy pero muy vivo aun.
Hacete un cursito de TS
Dani muchas gracias por el video muy buena explicacion y util tenes algo con esta herramienta hecha para un negocio saludos y muchas gracias
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 amigo muy bueno el video a cada detalle. Pudiera hacer cuando se requiere hacer desde una base de datos?
Hola Victor, si claro! En lugar de traer la data de la api, la traes directamente de la base datos.
buenas tardes muchas gracias muy bien explicado... disculpa podrías ayudarme a como se conecta con una bd mysql... te lo agradecería mucho
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 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...
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 🤙
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
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!
puedo utilizar fetch api, en vez de ajax>?
Si, sin ningún problema!
@@Dani-Code Y como puede cambiar el color de la paginacion, osea los botones de la paginacion?
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
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
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
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....
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
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!
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.
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 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
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 🤙
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
Nehomar, podrias capturar ese evento cuando presionas guardar y evitar que la pagina se recargue
Cómo agregaste los botones para poder editar AYUDA
Un poco tarde... Espero lo hayas solucionado, igual en el video lo muestro... Slds!
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
🤪
Pregunta, se pueden usar base de datos de MySQL?
Sí se puede
Hola Luis! Si claro! Slds 🤙
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?
Hola Brian! Me alegro que el contenido te sea útil, uso la extensión AYU y su tema ayu dark bordered. Slds!
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?
Hola Ivan! Tomado en cuenta para futuros tutoriales. Slds!
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
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
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
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!
como hacer que en pdf tenga la imagen porq he realizado pero no me imprime
Hola brenda, disculpa no comprendi bien la pregunta
muy facil de implementar en jquery , pero en vue js 3 no encuentro ejemplos en la web
Tomado en cuenta 🤙
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()
})
Hola Luis! Tienes instalado y enlazado correctamente jquery?
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 UA-cam.
Gracias
Tomado en cuenta estimado!
@@Dani-Code para cuando será? porque eso nadie lo a realizado en UA-cam, debe ser tan complicado?
me quede con las ganas de ver como le colocabas el response..
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...
BUeno , lastima que no tiene para agregar usuarios.
En ese caso necesitas un CRUD, te dejo un link ua-cam.com/video/aYFuLpfsPbs/v-deo.html
good tutorial
Muy buena explicación.... Una pregunta... algun numero de whtasapp para hacerte una consulta? Gracias