Mostrar Base de datos con Ajax - Datatables

Cómo mostrar 1000 registros en #datatables utilizando #ajax
Link del proyecto:
www.dropbox.co...
Mira como instalar wampserver desde cero, paso a paso:
• 1/8 - CRUD ¡Desde cero...

[@jcorderob]

Oyeeee, Excelente explixcación, ya me tenía loco ese problema con el ajax y los datos tomados desde formato json. Mil gracias y Dios te siga bendiciendo con conocimiento y paz en tu vida.

[@informaticadp]

Muchas gracias Jose!!! Igualmente para vos. Abrazo estimado!

[@pepebiondi5962]

y si mejor en vez de bendecir mandas un dinerito para que el hombre pueda motivarse mas?

[@soriacristian4892]

Otro excelente video Se nota mucho la diferencia de trabajar con un bucle a implementar Ajax, en db que contienen gran cantidad de registros. Gracias

[@SistemasHector]

Muy bonito. Pero la paginación son peticiones a la BBDD no se puede hacer un select a toda la tabla y luego recién comenzar a paginar.

[@franmora4263]

Genial, me funcionó de maravilla con un host gratuito, muchas gracias!!!

[@informaticadp]

Excelente Fran! Saludos!

[@calixtoromero3755]

Gracias por brindarnos tus conocimientos.

[@informaticadp]

Gracias a vos Calixto por el comentario. Abrazo!

[@samario0912]

Amigo muchas gracias, tu aporte me sirvió mucho para mi proyecto.

[@informaticadp]

Saludos bro! Me alegro mucho!

[@quisbertjorge8151]

ERES EL MEJOR BRO GRACIAS ME ENSEÑASTE MUCHO SALUDOS DE BOLIVIA

[@informaticadp]

Muchas gracias Jorge! Me alegro de que te sirvan los cursos y el contenido. Un abrazo!

[@NerarArango]

Gracias por tan buen tutorial.

[@informaticadp]

Muchas gracias mi estimado!

[@lautaroalonso9006]

Gran trabajo! Estaría muy bueno un tutorial sobre CRUD usando DataTables en Laravel, en habla hispana hay poco y nada sobre eso. Saludos!

[@informaticadp]

Gracias Lautaro! Si tengo pensado hacer un CRUD con laravel. Pero antes quiero hacer algo con node.js.

[@lautaroalonso9006]

@@informaticadp Genial! A mi y varios amigos nos interesa mucho el tema este en Laravel asi que estaremos al tanto. Excelentes videos!

[@CarlosVillarroelQuilahuilque]

buen video. gracias. me podrías enseñar como puedo hacer que la tabla sea ordenada por defecto por otro parámetro?.. que se pueda dejar ordenada (según tu ejemplo) por FirstName y no por User_id?... dónde se debe modificar eso?

[@joseairpods8592]

hola me arroja un error. DataTables warning: table id=tablaUsuarios - Ajax error. si me puedes ayudar te lo agradeceria bastante. Saludos!

[@rayitodota2475]

Excelente explicación, entiendo que el filtro de busqueda busca todos los campos. Pero podrías hacer un video donde agregues mas filtros para poder hacer búsqueda independientes por cada columna, te lo agradecería mucho.

[@informaticadp]

Gracias Arturo. Buena sugerencia, van a seguir los videos sobre datatables.

[@informaticadp]

Estimado, ya salió video con lo que solicitas..espero te sirva. Te dejo link kzbin.info/www/bejne/bnyVfX6qbr-Widk

[@rayitodota2475]

@@informaticadp Pero.dime eso puedo agregarlo con el.Video en el que comenté, mejor dicho puede fusionar?. De igual manera probaré cualquier cosa estaré escribiendo. Gracias

[@jeyca15]

Muchisimas gracias!!!!!! ♥ Me ayudo un monton para el trabajo

[@informaticadp]

Excelente! Me alegro mucho!

[@jeyca15]

@@informaticadp Una consulta, se puede hacer un if o for dentro del dataSrc? de ser asi, tienes algun video donde lo hayas implementadfo? Gracias por tu ayuda

[@acorner1564]

Muy buen trabajao, gracias por tu tiempo!!

[@informaticadp]

Muchas gracias. Saludos!

[@juansalazar7037]

Cómo puedo hacer para que no me muestre la ruta de la imagen y si me muestre la imagen como tal?

[@TrolitoJamc]

Y si yo quisiera enviar un parámetro, por ejemplo: que me muestre solo los que en la columna Gender diga Male. Como lo puedo hacer? Por que ahí me esta mostrando todos los registros de la tabla

[@ThePlaymobil12]

Excelente video! muchas gracias

[@informaticadp]

Muchas gracias!!

[@jesusabano3142]

hola gracias por tus proyectos que son de gran ayuda... como puedo mostrar la tabla en funcion de una valor que recibo de un campo text?

[@jenriquevj404]

he intentado renderizar un objeto que viene dentro un json, pero el datatable solo me muestra la leyenda [object Object], por ejemplo, las sucursales de una empresa, quiero mostrar de un lado la empresa y en otro las sucursales, en el json traigo la lista de empresas y un objeto con la lista de sucursales

[@vjpadron07]

Buenas noches, hay una cosa que no entiendo el popper.js que aparece al final del body. ¿Desde dónde se baja?. ¿Y para qué sirve?. Muchas gracias.

[@informaticadp]

Hola que tal! Popper era necesario para que funcione a pleno Bootstrap 4. Ahora con la versión 5 no hace falta. Te dejo el CDNs

[@CARlosDAN783]

Maestro gracias por esos tutoriales que nos ayuda mucho con demasiado :-) pero quiero hacerle una consulta. Como logro hacer que la tabla me empiece a mostrar los datos de forma descendente muchas gracias por su ayuda y mi Dios me lo bendiga.

[@pepebiondi5962]

si es gratis que me bendiga a mi también y a mi amigo que se peleo con su novia y a mi perro que esta constipado.

[@joseairpods8592]

hola que tal, esto cumple con estos datos?. Si me puedes ayudar te lo agradecería bastante. 1. Crea el entorno para que la transferencia se dé, es decir, se requiere una base de datos en el servicio de MySQL local a partir de un archivo SQL dado. Crea una interfaz de acceso a la base de datos por medio de PHP. También crea un protocolo de seguridad a través de sesiones / tokens. 2. La tabla deberá mostrar el total de registros, contar con paginación, cuántos registros va a desplegar, opción de búsqueda y opciones de orden ascendente o descendente. Cada una de estas opciones representa una transferencia asíncrona, se hará una solicitud al servidor y éste regresará la información que se mostrará en el momento dado en la tabla. Agrega opciones para agregar, modificar y borrar registros.

[@wilyvasquezchavez8335]

Hola buenas tardes, una pregunta, cuando realizó la paginación cuando voy por la página 8 o cuando dejo pulsado la tecla en el search me marca un error que no encontró "start" o el "length", sabes a que se debe ?

[@matiasderobertis2436]

Excelente explicación!

[@informaticadp]

Gracias Matías!

[@Garpuchines]

¿Esto funciona con tablas relacionadas con llaves foráneas? Ya lo he intentado y no se como enviar las llaves foráneas desde ajax

[@informaticadp]

Claro que funciona. Toda el tema de las claves se hacen con SQL. Adonde las procesas? Fíjate en tu backend como las estas enviando.

[@firedrax]

amigo excelente pero si quiero modificar un campo a mi voluntad ?

[@paniaguilar3008]

Excelente explicación. Pregunta, en esta tabla de ejemplo la consulta esta regresando un valor booleano en la columna "estatus", ¿Cómo podríamos modificar ese valor devuelto para que en lugar de mostrar ese "1" en la tabla, se muestre texto "Activo", "No activo" por decirlo de alguna manera?

[@victoriaflores4972]

Hola. Lo pusiste resolver? Y como?

[@paniaguilar3008]

@@victoriaflores4972 si, con una consulta doble porque desde ajax no se me ocurrió cómo.

[@alejandromena1774]

Hola, genial tu explicación y me ha ayudado bastante en mi proyecto pero me gustaría saber como lo puedo hacer para NO mostrar el "user_id", el cual no quiero que el usuario vea. Cuando quito la columna, no se envía el "user_id" al crud.php. He intentado con "visible: false" y tampoco funciona. Agradezco de ante mano.

[@fideltorresipanaque339]

buena tu explicacion, consulta para que sea responsive para movil no le aplicaria el css para que lla paginacion sea de menor cantidad y que me meustre un registro por pantalla, epsero tu ayuda o si tienes un tutorial enviame el link.gracias.

[@informaticadp]

Gracias! Se puede aplicar css puro, un poco de grid layout, en pocas lineas. Habría que actualizar ese proyecto.

[@daxterneitor3000]

Una pregunta como podría integrar un botón al final de la columna ?

[@informaticadp]

Lo podes hacer con la opción columns y ahi, entre comillas pones un tag button, lo hice en varios videos de datatables.

[@ManuelRodriguez-kw4pw]

Hola buenos días hago todo como en el video y no se muestran los datos en mi tabla

[@TiagoCaus]

Cómo agregar botón para editar y eliminar

[@leidyramirez7870]

Hola, me gusto el video, consulta es posible pintar los datos de una query por partes, es decir que a medida que use el paginador me vaya pintando los registros del resultado de la query?

[@informaticadp]

Muchas gracias Leidy! Te paso lo que estás buscando. Saludos! kzbin.info/www/bejne/oJ_Sl42eobR4g7c

[@felipedelgado1168]

Excelente vídeo, primero te agradezco tu voluntad de ayudar, me gustaria hacerte una pregunta si me puedes guiar un poco, de que manera podria cargar una lista de usuarios, pero que al lado de estos, en otra columa aparezca un checkbox donde el value sea el id del usuario? El contexto seria poder realizar una simple encuesta/votación , donde se cargue una lista de usuarios/candidatos y el publico pueda votar por ellos, un checkbox multiple no se si me explico.

[@informaticadp]

Muchas gracias Felipe! Mira te paso un video donde muestro como poner unos checkbox, podría adaptarlo, fijate si te sirve. Saludos! kzbin.info/www/bejne/eqK1mJpoe9Kmg5I

[@leolamanna]

Buenísimos tus tutoriales. IMPECABLE! Te consulto: Hay manera de hacer algo similar a esto, en que el origen de los datos, sea un sheet de Google?? Me estoy volviendo loco intentando reparar cosas que tenía funcionando perfectamente.... y que se cayeron con la actualización de Google Sheets API V4! =(

[@informaticadp]

Muchas gracias Leonardo! Fijate en el canal hay varios videos para mostrar datos desde una API, en tal caso, pones la URI de tu API con google sheets y listo.

[@grusso-dev]

Excelente explicación, Te hago una pregunta... Como haríamos para pasar algún parámetro a la url por queryParams por ejemplo para realizar un filtro en el select de la consulta.

[@informaticadp]

Muchas gracias Gustavo! No usé esa opción que decis queryParams. Directamente si necesito pasar algún parámetro para un filtro, lo paso por ajax en el data.

[@hellengendro01]

@@informaticadp Podrias hacer un ejemplo pasando parametros.

[@mgelista]

@@informaticadp intento mandarlo en el data, pero no llegan al back, o si llegan, llegan los datos descompuestos en texto y cada carater suelto

[@iscjoseurielguerratrinidad25]

suscrito gracias

[@informaticadp]

Gracias!

[@vladbp_yyz]

muy buen video. Una duda, como pongo un checkbox en la cuadrícula principal?. Que esté o no checkeado dependiendo del valor en la tabla. Que no me salga 0 o 1. Sino marcado o desmarcado. Gracias!!

[@informaticadp]

Hola Vladimir cómo éstas. Si haces la comprobación en el mismo checkbox con PHP utiliza operadores ternarios, es simple y funciona como un if-then-else.

[@jeyca15]

Alguien sabe como agregar un boton al final de la fila para cada registro?

[@jonathanbernal6980]

Hola muchas gracias, oye tengo una duda lo estoy haciendo por mysqli como podria enviar los datos con json_encode y listarlos como explicas asi lo tengo: Y este es el error que me sale: DataTables warning: table id=myTable - Requested unknown parameter '2' for row 6, column 2. For more information about this error, please see datatables.net/tn/4 while($data=$personas->fetch_assoc()){ $datos[]=$data['ID']; $datos[]=$data['Nombres']; $datos[]=$data['Apellidos']; $datos[]=$data['Telefono']; $datos[]=$data['Email']; $datos[]=$data['Direccion']; } json_encode($datos, JSON_UNESCAPED_UNICODE); en el js: $(document).ready( function () { $('#myTable').DataTable({ "ajax":{ "url":"inc/datajs.php", "dataSrc":"" }, "columns":[{"data":"ID"},{"data":"Nombres"},{"data":"Apellidos"}, {"data":"Telefono"}, {"data":"Email"}, {"data":"Direccion"}] }); }); Y la tabla: 12 13 14 ID 15 Nombres 16 Apellidos 17 Telefono 18 Email 19 Direccion 20 21 22 23 24 25 Te agradecería mucho que me ayudaras!!

[@informaticadp]

Hola Jhonathan muchas gracias. Por lo que veo tu código está bien. El error es puntual, fila 6, col 2. Habría que ver en la tabla que pasa ahí. Consulta por qué mysqli y no PDO? Es más seguro. Saludos.

[@jonathanbernal6980]

@@informaticadp Gracias, no lo uso por que aun no se pero creo que algún día me tomare el tiempo para implementarlo

[@victoraag]

Hola Jonathan, pudiste resolverlo? Igual me pasó lo mismo

[@jonathanbernal6980]

​@@victoraag Si pude déjame ver que es lo que tienes

[@victoraag]

@@jonathanbernal6980este es el error: DataTables warning: table id=tablaUsuarios - Invalid JSON response. For more information about this error, please see datatables.net/tn/1 LO UNICO QUE MODIFIQUE EN EL index.php: id nombre apellido usuario password . . . $(document).ready(function() { $('#tablaUsuarios').DataTable( { "ajax":{ "url": "baseDeDatos/consulta.php", "dataSrc":"" }, "columns":[ {"data": "id"}, {"data": "nombre"}, {"data": "apellido"}, {"data": "usuario"}, {"data": "password"} ] }); }); Y EN EL ARCHIVO conexion.php SOLO MODIFIQUE PARA LA CONEXCION a mySQL

[@BachataLosTepoz]

Podrías ayudarme a hacer un video con este tema "Child rows (show extra / detailed information)", ya que trato de jalar los datos desde una base de datos en phpmyadmin.

Hola. Excelente Video. Particularmente estoy usando datatable con ajax en Django. Logro rendereisar bien la tabla con los datos de la consulta, pero no logro hacer funcionar select. En el video de select usasjquery-3.5.1.slim.min.js y para ajax jquery-3.5.1.min.js. Select no funciona o con jquery-3.5.1.min.js o estoy haciendo algo mal. La verdad que he probado casi todo y no logro que funcionen juntos. Tambien me interesa saber como obtener las celdas que he seleccionado para poder procesarlas por ejem. Realizar una suma sobre los campos numéricos que estén seleccionados

[@informaticadp]

Muchas gracias Ariel! Vamos por parte. En gral es mejor usar la versión de jquery común, es decir las no minificadas (.min.js). Pero no estoy seguro que sea ese tu problema. El otro tema, te dejo un video donde muestro como hacer sumas con datatables. Espero sea de tu ayuda. kzbin.info/www/bejne/oJ_Sl42eobR4g7c

[@veronicagalvan529]

hola muy buenos los videos, te hago una consulta, no puedo encontrar nada parecido con datatable no se si se podra,, imagina una búsqueda por dos o tres campos con un botón, y los resultados de eso ponerlos en un data table con paginacion, encontre con el tipico search que busca en varios campos de la tabla , pero no es eso. digo imagina una tabla persona y que los campos de busqueda sea sexo , dni , apellido etc, entonces llenas los campos pones buscar con un boton , y ese resultado llevarlo a un datatable _ se puede con este plugin ?

[@informaticadp]

Cómo estás Verónica! Mira te paso algunos proyectos que están en el canal. Por supuesto que se puede hacer de todo. Después los adaptas a tus proyectos. Filtros en las columnas kzbin.info/www/bejne/bnyVfX6qbr-Widk Paneles de búsqueda kzbin.info/www/bejne/bpm3mqumaJKrjqc

[@luisfalleni4188]

hola estoy haciendo el mismo eejercicio pero los datos no me aparecen en el datatable

[@informaticadp]

Hola Luis. Por consola que error te aparece? Podes descargar el proyecto.

[@luisfalleni4188]

@@informaticadp no me aparece ningun error solo no me los muestra

[@amloamlo2416]

Hola, el link del proyecto no aparece, no puede hacer el favor de ponerlos bien si se puede? muchas gracias. saludos!

[@informaticadp]

Listo, ya quite la publicidad, saludos!

[@juanfelipebuiles6525]

Muy buen video bro

[@informaticadp]

Muchas Gracias Juan!!

[@GabrielaHaberkorn]

Muy buena explicación. Tengo un inconveniente con mi datatable. Me responde: "emptyTable". He revisado la url del ajax y he visto sin problemas el json en el navegador. ¿Alguna alternativa para solucionarlo? Gracias. Comparto mi código $(document).on("ready", function(){ $("#tabla").DataTable( { "ajax": { "method": "POST", "url" : "clientes/mostrarTodos", "dataSrc": "" }, "columns":[ {"datos": "id"}, {"datos": "employee_name"}, {"datos": "address"}, {"datos": "created_at"}, {"datos": "updated_at"} ], language: { "decimal": ".", "emptyTable": "No se ha llamado información o no está disponible", "infoEmpty": "Sin registros", "infoFiltered": "(Filtrado de _MAX_ total entradas)", "lengthMenu": "Mostrar _MENU_ entradas", "loadingRecords": "Cargando...", "processing": "Procesando", "search": "Buscar: ", "zeroRecords": "No se encuentran resultados", "paginate": { "first": "Primero", "last": "Último", "next": "Siguiente", "previous": "Anterior" } } }); }); =============================================== Html: ID Nombre Dirección Creado Actualizado ======================================================= JSON { "datos": [ { "id": "9", "employee_name": "Esmeralda", "address": "Malvinas 456", "created_at": "2020-06-07 20:48:23", "updated_at": null }, { "id": "7", "employee_name": "Marcelo", "address": "Malvinas 456", "created_at": "2020-04-07 19:44:16", "updated_at": "2020-06-07 20:01:14" } ] }

[@informaticadp]

Hola Gabriela, Muchas gracias! Estoy revisando el código. En la propiedad URL de ajax tengo dudas en la dirección que pones, ahí me parece que deberías revisar. En el ejemplo que hice fijate que simplemente referencio el path adónde está el archivo, vos pones una dirección con php? Fíjate ahí.

[@GabrielaHaberkorn]

@@informaticadp Estoy trabajando con Codeigniter, por lo que el json es el resultado de un método. Si copio la url localhost/proyecto/clientes/mostrarTodos en el navegador, obtengo en pantalla el json que compartí en la pregunta. Hice la modificación, y sigo obteniendo el mismo resultado "ajax": { "method": "POST", "url" : "localhost/proyecto/clientes/mostrarTodos", "dataSrc": "" },

[@mohssinelmariouh2755]

hola compañeros estoy trabajando sobre un mini framework , cuando llegue al etapa de dataTable ya frene lleve una semana invistigando y ententando de 1000 manera pero sigo con la misma alerta si la tabla la intergre y finciona correctamente , y los datos la tengo en json en uun metodo , luego en el archivo js cuando trabajo la funcion de jquery para inegrar los devuelto de la base de datos en json en data table atraves de su id me de esta alerta no exito enetente con 1000 manera y al inspeccionar todo esta a la pefeccion en seguida comparto el codigo , la alerta es esta : DataTables warning: table id=roltable - Cannot reinitialise DataTable. For more information about this error, please see datatables.net/tn/3 --- parese al principio es nada importante pero esta convertiendo para me algo extraño no tiene esplicacion no funciona ni en local ni vps

[@informaticadp]

Ese error, sucede casi siempre cuando algún campo de la tabla no coincide exactamente con los campos que mostras. Puede ser un guión bajo, una mayúscula, algún carácter mal escrito que no coincide. Revisalo campo x campo.

[@luisbano1468]

Amig@s buenas noches! Su ayuda por favor !!!!! Como se llama el la caja de busqueda donde ingreso el dato a buscar que genera el script en un datatable ? lo que deseo es escapar a caracteres especiales inyeccion mysql cuando realizo un filtro de la data.. MIL GRACIAS POR SU AYUDA sSearch ?

[@informaticadp]

Es sSearch. Pero para que los queres escapar? El plugin ya hace todo.

[@ronaldalexanderjavielorell8052]

Hola, alguien me puede apoyar, tengo problemas para buscar por fecha con data tables y mysql.

[@matiasmartinflores1683]

una pregunta broder, cuando hay mas de 1000 registros y por ejemplo quiero hacer un delete en una accion por que podria ser que no me borre ??

[@informaticadp]

Cómo estás Matías. No debería pasar. Es indistinto el número de registros. Tiene que ser otra cosa. Te marca error en la consola?

[@matiasmartinflores1683]

@@informaticadp sip, no me manda el id, me acabo de dar cuenta al ver la consola. Estaba viendo el tema de serverside, cursos y demas para quizas implementarlo y ver si haciendolo nuevamente resuelvo el problema. gracias, ahi me di cuenta igual pq no borra pq no manda el id. lo raro es que a otros campos con id mas pequeños si los manda

[@informaticadp]

Si, miralo detenidamente. A veces una simple línea de código o algo se nos pasa y eso ocasiona que funcione mal. Nos pasa a todos.

[@aa_9610]

Buenas profesor, he hecho todo tal cual como usted, pero me sale este mensaje "DataTables warning: table id=ciudades - Invalid JSON response. For more information about this error, please see datatables.net/tn/1"

[@informaticadp]

Estimado, fijate en la tabla el nombre del campo y en el código JS. Seguro es alguna letra que está mal o no coinciden. Avísame como te fue.

[@aa_9610]

@@informaticadp Ya ví profesor, el problema estaba en el archivo consulta.php, había escrito nuevamente execute() cuando debía escribir fetchAll(), ya lo solucione!!, muchas gracias por sus videos, aprendo bastante!!

[@informaticadp]

Excelente! Saludos Angel!

[@benjaoliva3383]

Me tira error con status 500 y ya probe de todo :(

[@benjaoliva3383]

la conexion esta bien hecha, es algo de la consulta, les dejo el codigo:

[@benjaoliva3383]

arreglado, descargue los archivos y los copie tal cual cambiando la contraseña a la base de datos y todo perfecto

[@informaticadp]

Excelente!

[@macporton5953]

Do you have an English version tutorial?