Datatables ¡Aprendé, desde cero!
HTML-код
- Опубликовано: 18 сен 2024
- Cómo descargar, instalar y configurar DataTables desde cero, orientado a principiantes.
Si quieres apoyar al canal Informática DP - link para donación con Paypal
www.paypal.com...
Archivos necesarios:
Bootstrap 4 - getbootstrap.com/
JQuery - jquery.com/
DataTables: datatables.net/
Link de descarga: en el video se muestran las opciones a elegir para instalar de forma básica.
REDES SOCIALES
Si queres seguirme en las redes sociales para estar al tanto de los próximos cursos y tutoriales:
Web: www.informatica...
Facebook: / informaticadp.com.ar
Instagram: / info_dp
Twitter: / infodp1
CURSOS DEL CANAL
Mongo DB para principiantes
• MongoDB ¡desde cero!
Todo sobre DATATABLES 2020
• Datatables
Vuetify CRUD - Material Design.
• Vuetify CRUD - Materia...
BOOTSTRAP 4 - Componentes
• Bootstrap - Componentes
Vue.JS ¡desde CERO! - 1era Parte
• Vue.JS ¡desde CERO!
CRUD con Vue.JS, PHP, PDO, MySQL y Bootstrap 4
• CRUD con Vue.JS, PHP, ...
phpMyAdmin - Tutoriales
• phpMyAdmin - Tutoriales
Dashboard ¡Aprendé a implementar!
• Dashboard ¡Aprendé a i...
Curso de CSS 3 - aprendé a aplicar estilos y efectos a tus proyectos webs
• CSS3 desde cero
JSON desde cero ¡para principiantes!
• Aprendiendo JSON.
LOGIN con PHP y Bootstrap 4
• LOGIN con PHP y Bootstrap
HighCharts ¡desde cero!
• HighCharts ¡desde cero!
CRUD desde cero - PHP PDO, Bootstrap 4, JQuery, DataTables, MySQL, WampServer.
• CRUD desde cero
Desarrollo web - Tutoriales
• Desarrollo web - Tutor...
Página web ¡desde cero! desarrollada con BOOTSTRAP 4
• Página web ¡desde cero!
InfoDP - Sistema de Ventas y Compras (sistema de PAGO)
• InfoDP - Sistema de Ve...
InfoDP Tienda - Ropa, calzados y accesorios (sistema de PAGO)
• InfoDP Tienda - Ropa, ...
¿Cómo hago...? (tutoriales, tips, trucos y consejos de programación)
• ¿Cómo hago...?
NodeJS 2020 ¡desde cero! (en proceso)
• Node JS ¡desde cero!
Sin dudas el mejor tutorial de DataTables, he visto muchísimos y ninguno está tan completo y bien explicado como el tuyo!
Muchas gracias Lautaro! Te mando un abrazo!
espectacular lo simple y detallado que explicaste y sobre todo, dejaste el repositorio en dropbox para cambiar el lenguaje. APLAUSOS
Muchas Gracias Gaston! Saludos.
sos crack!! saludos desde argentina ,lo pude aplicar a mi proyecto satisfactoriamente!
Excelente!! Me alegro mucho, saludos y éxitos!
Hola, desconocía totalmente datatables, me ha venido genial tu explicación muchas gracias. Lo único y como apunte, he seguido con las datatables para filtrar el contenido por los imput y no me funcionaba hasta que he eliminado el main.js ya que este hace que se recargue la tabla.
Hola, el mejor tutorial y justo que ahora estoy haciendo un proyecto que me dejaron. Se que el video es de hace 5 años. Tiene un video actual con Bootstrap 5 y cln botones de exportaciones PDF EXCEL ETC.?
Maravilloso , simple y conciso. Gracias Capo
Muchas gracias a vos!!!!
Muchas gracias por el video, voy a buscar si tienes en tu canal que al hacer clic se levante una ventana modal que aun no consigo implementar. Saludos
Excelente muchas gracias por compartir sus conocimientos.
Gracias por tus palabras!
si prosigues a continuar otro tuto hazlo con fondo negro porfa, gracias por tu video.
Si Moises, el resto de los videos que hice después y hago actualmente ya tienen otro formato. Saludos.
Muchas gracias por todo el excelente trabajo. sé que ya tiene un tiempo este proyecto y ya habrás subido otros más nuevos, pero como inicié viendo este tutorial me gustaría llevarlo a cabo, ¿sería posible si no es mucha molestia volver a subir el enlace del proyecto para poder descargarlo? muchas gracias !
Amigo muy agradecido por este video , me dejaste todo mas claro que el agua.
saludos y su respectivo like y sub.
Muchas gracias a vos. Saludos!
Hola, que buen tutorial, podrías hacer uno de como instalar Plug-ins y fixed header?
Gracias. Si, tomo la idea para próximos videos. Te recomiendo otro sobre datatables qué ya está en el canal. Te dejo el link.
ruclips.net/video/yaOnkcEBl18/видео.html
Muchas gracias. Me sirvió mucho esta explicación.
Excelente Angela! Saludos!
excelente tutorial
Muchas gracias!!!
Muchas gracias por tu ayuda
Gracias Humberto!!
Gracias por dejar el proyecto en Dropbox
Gracias a vos por ver los videos. Abrazo!
Muy bien video, cómo pudiera reemplazar la tabla con una creada en Mysql.
Gracias por compartir. Muy bien explicado.
Gracias Juan!
Muy bueno...gracias
Muchas gracias David!
Espectacular, Ya me suscribí y coloque la campanita jaja
Gracias Cristian! Saludos.
Hermano, buen tutorial y bien explicado
Buenas, una pregunta, puedo generar un buscador para mi datatable, pero que este se encuentre alojado fuera del pluggin data table, es decir no se, en un div que no este contenido dentro del div que contiene o que llama a Jquery... Gracias
Hola, si se puede. Es simple.
En el index.html agrega lo siguiente, adonde quieras. Ejemplo:
En el archivo main.js agrega:
$(document).ready(function() {
$('#example').DataTable();
oTable = $('#example').DataTable();
$('#buscador').keyup(function(){
oTable.search($(this).val()).draw() ;
})
});
@@informaticadp muchisimas gracias.. apenas pueda lo probare y cualquier cosa le estare avisando... su merecida 🍺🍻
@@informaticadp de nuevo muchas gracias me sirvio, eres genial
Necesito hacerte una consulta mas..datapicker en angular
Hola! Sabes que tengo una tabla que agrega sus celdas al TBODY mediante Javascript ya que estoy utilizando Firebase.. El tema que al añadir dinamicamente los datos a las celdas DATATABLE dice que no hay datos.. ¿podrias ayudarme?
Hola, si podes pasame tu código.
Gracias es de gran ayuda este video.
Saludos!✔️
Gracias. De mucha utilidad. Saludos!
Me alegro que te sirva Eduardo! Saludos!
Gracias por la información.
Gracias Jason. Fijate en este otro video. En el canal hay de todo sobre Datatables. Saludos.
ruclips.net/video/o9NB7pH2i8U/видео.html
gracias me sirvio mucho
Hola, gracias por la explicación, una pregunta, ¿Comó se hace para que quede con la opción de + que aparece en el ejemplo del inicio del video que si uno lo cliquea despliega más información? Muchas gracias.
Hola Diego! Esto creo que es lo que buscas. Saludos.
ruclips.net/video/HIDn_HpEuEQ/видео.html
Gracias! Ha sido de gran ayuda!
Me alegro mucho! Saludos.
Hola, que tal? A mi no me apace el buscador y el paginador. He colocado el script tal cual y todos los links. Que pasará?
Genial, gracias por compartir
Gracias Alejandra! Te recomiendo los nuevos videos (2020) sobre datatables. Saludos!
ruclips.net/p/PLrAw40DbN0l3S_1o1ya45SaWiMnGqboK7
Buen video, gracias por explicarlo
Gracias Gianfranco! Saludos.
Como puedo ordenar por fecha?
Excelente canal, me ha servido de mucho. Tengo una pregunta, como hago para reflejar un datatable que tengo en mi vista principal a un modal... Por ejemplo selecciono un ID y que ese ID al seleccionarlo se me refleje en un datatable montada en un modal?
hermano una pregunta se podría colocar al lado de la barra de búsqueda una lista de marcas
Totalmente, la ubicas modificando el dom de datatables. Te paso un video con ese tema.
ruclips.net/video/LJpv-30hgAw/видео.html
Hola, gracias por el video! Una consulta, ¿Cómo sería si el contenido del data table, no necesariamente las cabeceras, tiene palabras con tildes o ñ? De antemano gracias por tu respuesta. Saludos cordiales
Gracias, no se si me puedas orientar, en esas tablas tengo una ultima fila que suma, pero a la hora de exportar o impirmirla esa ultima linea no aparece me puedes guiar...
Como agregar select2 en los títulos de las columnas?
Hola, disculpa. el archivo main.css donde lo encuentro ?.
Hola! Se puede usar DataTables para calcular celdas entre sí? Por ejemplo: colocar una base de datos de productos y al lado sus respectivos precios, entonces cuando yo coloque manualmente un incremento de x porcentaje % en una celda generadora que esté ubicada fuera de dicha tabla, para que me modifique todos los precios al mismo tiempo. ¿Es eso posible?
Si se puede, obviamente usando Ajax. Se puede tranquilamente.
@@informaticadp Gracias, soy novato. Me ayuda mucho tu canal.
Hola, una pregunta como hago para colocar mas de una funcion en el datatable, cuando lo hago se daña la funcion de busqueda.
Hola, como se daña la función de búsqueda? Controla comas y paréntesis. Que error te sale?
@@informaticadp Ya lo solucione jeje gracias.
@Informática DP Excelente vídeo. podrías ayudarme realizando una conexión con base de datos usando el framework laravel y por supuesto DataTables. te lo agradecería inmensamente. (lo que quiero saber es como llenar esa tabla con exactitud) ya que al momento de cargar no busca los datos. como si no estuvieran.
saludos.
Gracias por tus palabras! Los datos son mostrados en la tabla pero al momento de buscar no trae los resultados? No te da error de nada desde la consola de chrome?
para conecta la base de datos deber ir al codigo de tu proyecto (personalmente lo corro con sublime text), y buscar el archivo env. y editar los siguientes datos con los de tu base de datos...
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=saludos
DB_USERNAME=postgres
DB_PASSWORD=20192019
Luego vas al terminal de laragon ejecutas el comando php artisan migrate -mc para que te migre la tabla a postgree o a la base de datos que uses junto con el modelo y el controlador.. posteriormente creas un seeder para rellenar los datos de las tablas con datos aleatorios para de esa manera poder realizar pruebas.. Saludos.
No me funcionó en mi proyecto de asp net core, en el layout cargo los archivos css y js, en mi vista la tabla pero no me sirve
Profe una pregunta, yo quiero mostrar en la tabla unicamente usuarios creados del día que he registrado. Al día siguiente quiero de mi tabla este vacío, o sea que desaparesca todos los registros que he realizado el dia anterior. Es posible en data table ?
Hola!! Quisiera preguntarte, resulta que no me aparece el boton de filtracion para mostrar la cantidad de registros , a que se debe esto?
Alguien sabe como mover el input de buscar hacia el lado izquierdo?
Y si no tengo mis tablas en el HTML pero las tengo en un JSON y logro hacer que el JSON se presente en mi pagina pero Datatable no reconoce esa tabla de JSON y solo reconoce la que manualmente escribo dentro del HTML, que hago? :s
hola nose donde pegar los archivos que descomprimiste no tengo esa carpeta
En ese video uso el centro de descargas. Mira este video, también es desde cero y no hay que descargar nada la PC.
ruclips.net/video/o9NB7pH2i8U/видео.html
@@informaticadp gracias!
Amigo y si quisiera guardar esos registros en la base de datos por ejemplo? osea con una consulta en mysql yo extraigo unos registros de varias tablas que tengo en mi db pero quisiera guardar esa consulta en otra tabla, es decir enviar estos registros pasándolos por un insert masivo por decir lo de alguna manera
Hola Enrique! Te paso uno de los tantos videos en el canal. Aquí muestro como hacer lo que solicitas.
ruclips.net/video/44w-jw9Y_PY/видео.html
hola tengo un caso no me aparece nada de datables con Jquery , a que de debe los recursos estan bien aplicados
Saludos, como puedo utilizar ese buscador para traer nombres de clientes desde una basa de datos?
Hola amigos yo en ami API itegronla tabla con éxito luego , hago la consulta de a base de datos y muestro la resultado en un método en json luego para.mostrar el resultado.enmla tabla fracso me da alerta si todo está perfecto de que viene este alerta ????
mil gracias me funciono esta perfecto lo recomiendo
Buenísimo Misael. Saludos!
@@informaticadp así e igual la explicación que da usted lo muy bien estoy sacando la clase de programación y diseño web esto me sirve mucho
Excelente, me alegro mucho!
Hola, me gustaría saber cómo se puede personalizar el ancho de las columnas, ya que por default está en automático. Gracias
hola tengo una pregunta es que la verdad no se como hacer la carpeta del jquery y la del poper.
como se hace para obtener estos archivos, espero y me ayudes con esto gracias.
Muy bueno el video.. como se podrían formatear las fechas para que sean dd/mm/aaaa? gracias
Hola German. Podrías utilizar la función render, en este ejemplo se utiliza para agregar banderas de países datatables.net/examples/basic_init/data_rendering.html
@@Forlefor gracias! Lo voy a estar probando 😎
hola!, no se que estoy haciendo mal que solo me funciona para la primera fila. Es decir, estoy cargando la tabla por javascript desde una base de datos de sqlserver. La tabla me carga, pero es como que la datatable solo actua sobre la primer fila.
Hola. En la consola de Chrome te sale algún error?
@@informaticadp el error venia por el lado del tbody. Estaba incluyendo a este en el foreach que me creaba las filas y por ende se me generaban varios tbody. La solucion fue sacarlo.
muchas gracias por el video, muy bueno
Espectacular! Saludos!
gracias crack
Saludos Manu!!
@@informaticadp una pregunta, estoy aprendiendo react y no pude poner este tipo de tablas, tengo que instalar por npm?
hola hno, muy buenos todos tus videos, en esta ocacion estoy necesitando algo q NO SE SI PUEDE HACER, resulta q tengo un sheet de google y lo muestro en una webapp con datatable, pero mi problema es q me trae todos los registros, Y YO SOLO QUIERO Q ME MUESTRE EL REGISTRO Q BUSCO EN EL INPUT BUSCAR...ES POSIBLE ESO? O SEA SI NO BUSCO NADA Q NO ME muentre nada...
Intente ponerle el codigo este a mi datatable y no funciona
$('#example').dataTable( {
"search": {
"caseInsensitive": false
}
} );
se pueden colocar imagenes?
Se pueden colocar imágenes, hasta ahora no hice video sobre eso. Voy a continuar con más videos de datatables.
Buenas tardes, resulta que no me permite aplicar los filtros; de echo, no me parecen, ni aparece nada de la vista que aplicaste para hacer mas practica la tabla, podrías ayudarme?
P.D. Explicas muy bien
Tengo un problema, lo probè con datos extraidos de una base de datos y no me hace la busquedad solo manda un mensaje que no se encontrò y estando el dato ahi, ayudamee!!
Como cargas los datos? Desde php directo? O con ajax?
@@informaticadp con ajax
me gustaria saber como puedo usar sessions con data tables para editar inline con privilegios de usuario.
En el canal, en varios proyectos, utilizo sessions con datatables usando tanto PHP como NodeJs.
@@informaticadp muchas gracias pense que solo se podia usar sessions con el editor pago de datatables.
Tutorial de tablas anidadas mostrarla con ese plugin osea que una factura tenga muchas artículos al darle a una de las facturas despliegue los artículos q está tenga
Hola saludos, gracias por el aporte y beneficio que dan sus cursos, tengo una duda, con respecto a los componentes podría guiarme respecto a la distribución de las carpetas el popper, main y jquery. me confunden. Tiene algún tutorial sobre ellos
Hola Karolina, muchas gracias. Esos archivos, popper, y jquery tienen como finalidad darle funcionalidad al código que se encuentra en main.js. Sin ellos lo que está en main.js no podría funcionar. Si te quedo claro, bien, si no, avisame.
@@informaticadp @Informática DP Muchas gracias, ya lo estoy viendo con más detalle aquí www.dropbox.com/s/788d7pn89naqht4/crud_2020_ajax.zip?dl=0 ..En esta actualización de su tutorial. Gracias..!!
Saludos, disculpa que vuelva por aquí, termine el curso y en el proyecto me presenta un error que no he podido superar. DataTables warning: table id=tablaUsuarios - Invalid JSON response. For more information about this error, please see datatables.net/tn/1.
Ya revise el código las comillas. Desabilite el mapa Javacript por el popper y persiste el problema
Cómo puedo poner el argumento en url
Hola...excelente el video, pero tengo un problema.....en mi servidor local funciona todo y el momento de cargarlo al servidor en la nube ya no cargan los datos
Gracias! Llenas datatables desde una base de datos con phpMyAdmin? En tu archivo de conexión fijate los parámetros.
@@informaticadp Excelente vídeo. podrías ayudarme realizando una conexión con base de datos usando el framework laravel y por supuesto DataTables. te lo agradecería inmensamente. (lo que quiero saber es como llenar esa tabla con exactitud) ya que al momento de cargar no busca los datos. como si no estuvieran.
saludos.
Me encanto el video, una pregunta, como podria hacer la suma total de todos los salarios para este ejemplo?
Muchas gracias Dixon! Mira en este video explico lo que solicitas. Saludos!
ruclips.net/video/jnofZhlOEMU/видео.html
@@informaticadp muy amable, muchas gracias
teniendo en mongo db informacion, como seria para llamar los datos desde la bd ??
Hola, todavía no hice ningún video de MongoDB con datatables. Te cuento, tenes disponible en el canal un curso de MongoDB desde cero y un CRUD con Firebase (que maneja bases de datos NoSQL como MongoDB) y datatables. Te dejo los enlaces por si te sirven.
ruclips.net/p/PLrAw40DbN0l1tjWT1Lg2kKxm0eHdpPrDu
ruclips.net/video/WQBzmRQ5PoA/видео.html
Hola gracias por tus videos tan explicativos, necesito hacerte una consulta necesito inicializar el datatable con un filtro h utilizado search EJEMPLO :search: {
search: 'AAA123'
} y me funciona pero deseo que el search solo tome una columna especifica para filtrar al inicilizar sera posible esto?
En donde puedo editar para ver menos de 10 filas por paginación ??
En muchos videos realizo lo que solicitas. Creo que en éste vídeo explico eso. Si no, búscalo en la lista de reproducción de datatables.
ruclips.net/video/LJpv-30hgAw/видео.html
Buscando estilos para dar formato en un proyecto web que estoy haciendo con eclipse, no me queda claro si DATATABLES es compatible para aplicar estilos con JSF a la etiqueta de tablas pues se llaman igual. Gracias, ejem :
Hola David, sinceramente no he probado lo que solicitas. Si en algún momento veo el tema te aviso y hasta podría grabar un video. Saludos.
@@informaticadp 1000 Gracias, seguiré mirando como dar formatos a tablas, pues estoy un poco perdido entre las opciones que me salen: prime faces, bootstrap, etc.... y al ver tu video pensaba que me valdría. Pero si descubres algo, me dices.
Siempre estoy subiendo cursos de todo tipo, relacionado al mundo web, por supuesto. Ojalá alguno te sirva. Un abrazo!
hay alguna forma de centrar los encabezados?
Hola. Muchas gracias por compartir y enseñarnos. Una pregunta como puedo seleccionar los registros solo donde el valor sea pasado por la url. Desde ya muchas gracias si puedes responderme.
Hola Daniel, gracias a vos. El tema de seleccionar registros desde datatables lo trato en el curso CRUD desde cero. A partir del video 4.
ruclips.net/p/PLrAw40DbN0l1QmIk6z0zsutBO3StnAafW
Una pregunta tengo 1000 registros en mi data mysql y datatable solo me muestra 25 porque debe de ser amigo gracias
Con qué traes los datos, ajax, foreach, Server-side? Te paso ésta lista de rep. tiene todo sobre datatables y mostrar hasta 1M de registros.
ruclips.net/p/PLrAw40DbN0l3S_1o1ya45SaWiMnGqboK7
quiero aplicar este mismo ejemplo con una BD pero al momento de utilizarlo me manda el siguiente error DataTables warning: table id=DatAgenda - Cannot reinitialise DataTable. For more information about this error, please see datatables.net/tn/3
Esos warning son casi siempre porque la columna del html no coincide con la de la BD, ya sea por sintaxis o porque no coinciden
Muchaaaas gracias estaba perdida en el tema, solo tengo una duda, ¿es posible ocupar la función para agrupar los datos y tener el boton para descargar la información en Excel?
alguna recomendación?
Gracias Kenya! Fijate en este video, hay trabajo con botones y Excel. ruclips.net/video/yaOnkcEBl18/видео.html
Sos Grosso Ché. Like y Suscripción de inmediato !!!
Muchas gracias! Saludos!
Hola bro buenas tardes, soy desarrollador desde hace muchos años y la verdad nunca me interese en aprender desarrollo web, ahora quiero implementar un sistema que tengo desarrollado en vb.net windows form via web me gustaría angular y node he visto un par de tus videos me parecen buenos me gustaría que me recomendaras que video tuyo ver para tal fin me encantaría poder desarrollar usando datatables te pido me eches una mano quedo a la espera de tu recomendación o la de alguno de tus seguidores bye
Hola Eduardo como estás! Si queres usar Node JS, te recomiendo veas mi cruso Node JS desde cero, y también veas el nuevo curso de como crear una API Restful con Node. Seguro te van a servir. Abrazo!
Informática DP ya voy a ver el video que me sugieres, gracias
Hola Gustavo!, eres de Tucumán?
Hola Pablo, soy de Jujuy!
Hola, estoy haciendo un proyecto y me ha servido mucho tu codigo pero lo unico que quiero cambiar es que no me ordene los datos en orden alfabetico, ¿Cómo puedo solucionar eso? Gracias
Hola Giovanni, simplemente con tocar en el header de la columna ya te ordena los datos. Debería ver cómo es tu proyecto, si lo querés hacer apenas cargue la tabla va esto dentro del codigo JS.
aaSorting: [[0, "asc"]]
Donde 0 es el número de la columna a ordenar. Saludos.
Adicional quiero meterle un logo para imprimir pero tampoco lo toma
Desarrollaría con mongodb como base de datos o podría ser la de Google también
Ambas van bien, son NoSQL, si queres SQL y usas .Net como me dijiste en otro comentario, obviamente utilizarías SQL Server. Saludos.
Informática DP el sistema que tengo utiliza SQL como motor de base de datos pero como te comenté quiero hacerlo en angular y usar una base de datos nosql
Me parece perfecto. Usaste Firebase en tiempo real? Es una locura. En este curso la utilizo. Un abrazo!
ruclips.net/p/PLrAw40DbN0l2vPL-iZ3JHW7-_fmAXfZpC
Lo malo es que no se puede buscar solo por un campo, este plugin hace una busqueda en toda la tabla lo que quita efectividad
Holaa Buenisimo el video.. queria descargarlo al proyecto pero se cayo el link nose si alguien lo tiene y me lo puede pasar
No he terminado de ver el video, sin embargo quiero hacer una pregunta, se puede implementar el filtrado de datos por rango de fechas con datatable ?
Muy complicado amigo, podrías hacer otro vídeo?
No me funciona
exelente pero no me corre ni las paginacion, ni la busqueda, ni muestra el numero de reistro, a pesar de descomentar en el main el scritp, no me hace nada, intente colocarlo antes del cierre del body y tampoco funciono, alguna sugerencia??
Gracias! Fíjate en la consola de Chrome que error te arroja. Por lo que comentas seguro es por blas referencias del .css y .js
Se ve muy mal la pantall
Si, eran los primeros videos. Actualmente todos estan en formato full hd y 16:9.
No se ve nada
Ya salieron los nuevos videos de datatables 2020. En formato HD 16:9, se ven bien desde cualquier smartphone.
@@informaticadp que agradable sujeto :v