Mostrar Base de datos con Ajax - Datatables
Вставка
- Опубліковано 8 вер 2024
- 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...
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.
Muchas gracias Jose!!! Igualmente para vos. Abrazo estimado!
y si mejor en vez de bendecir mandas un dinerito para que el hombre pueda motivarse mas?
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
Gracias por tan buen tutorial.
Muchas gracias mi estimado!
Amigo muchas gracias, tu aporte me sirvió mucho para mi proyecto.
Saludos bro! Me alegro mucho!
Gracias por brindarnos tus conocimientos.
Gracias a vos Calixto por el comentario. Abrazo!
Genial, me funcionó de maravilla con un host gratuito, muchas gracias!!!
Excelente Fran! Saludos!
ERES EL MEJOR BRO GRACIAS ME ENSEÑASTE MUCHO SALUDOS DE BOLIVIA
Muchas gracias Jorge! Me alegro de que te sirvan los cursos y el contenido. Un abrazo!
Gran trabajo! Estaría muy bueno un tutorial sobre CRUD usando DataTables en Laravel, en habla hispana hay poco y nada sobre eso. Saludos!
Gracias Lautaro! Si tengo pensado hacer un CRUD con laravel. Pero antes quiero hacer algo con node.js.
@@informaticadp Genial! A mi y varios amigos nos interesa mucho el tema este en Laravel asi que estaremos al tanto. Excelentes videos!
Muchisimas gracias!!!!!! ♥ Me ayudo un monton para el trabajo
Excelente! Me alegro mucho!
@@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
Muy buen trabajao, gracias por tu tiempo!!
Muchas gracias. Saludos!
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.
Excelente video! muchas gracias
Muchas gracias!!
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.
Gracias Arturo. Buena sugerencia, van a seguir los videos sobre datatables.
Estimado, ya salió video con lo que solicitas..espero te sirva. Te dejo link
ua-cam.com/video/8K2LKt9ZcSw/v-deo.html
@@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
Excelente explicación!
Gracias Matías!
suscrito gracias
Gracias!
hola me arroja un error. DataTables warning: table id=tablaUsuarios - Ajax error. si me puedes ayudar te lo agradeceria bastante. Saludos!
Cómo puedo hacer para que no me muestre la ruta de la imagen y si me muestre la imagen como tal?
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?
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?
Muy buen video bro
Muchas Gracias Juan!!
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
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.
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
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
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.
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! =(
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.
Una pregunta como podría integrar un botón al final de la columna ?
Lo podes hacer con la opción columns y ahi, entre comillas pones un tag button, lo hice en varios videos de datatables.
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?
Hola. Lo pusiste resolver? Y como?
@@victoriaflores4972 si, con una consulta doble porque desde ajax no se me ocurrió cómo.
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 ?
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?
Muchas gracias Leidy! Te paso lo que estás buscando. Saludos!
ua-cam.com/video/jnofZhlOEMU/v-deo.html
¿Esto funciona con tablas relacionadas con llaves foráneas? Ya lo he intentado y no se como enviar las llaves foráneas desde ajax
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.
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.
Muchas gracias Felipe! Mira te paso un video donde muestro como poner unos checkbox, podría adaptarlo, fijate si te sirve. Saludos!
ua-cam.com/video/DqRgg2FmsM0/v-deo.html
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.
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.
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.
Alguien sabe como agregar un boton al final de la fila para cada registro?
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.
Gracias! Se puede aplicar css puro, un poco de grid layout, en pocas lineas. Habría que actualizar ese proyecto.
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.
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.
@@informaticadp Podrias hacer un ejemplo pasando parametros.
@@informaticadp intento mandarlo en el data, pero no llegan al back, o si llegan, llegan los datos descompuestos en texto y cada carater suelto
amigo excelente pero si quiero modificar un campo a mi voluntad ?
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!!
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.
Hola buenos días hago todo como en el video y no se muestran los datos en mi tabla
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!!
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.
@@informaticadp Gracias, no lo uso por que aun no se pero creo que algún día me tomare el tiempo para implementarlo
Hola Jonathan, pudiste resolverlo? Igual me pasó lo mismo
@@victoraag Si pude déjame ver que es lo que tienes
@@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
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
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.
ua-cam.com/video/jnofZhlOEMU/v-deo.html
Cómo agregar botón para editar y eliminar
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 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 ?
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
ua-cam.com/video/8K2LKt9ZcSw/v-deo.html
Paneles de búsqueda
ua-cam.com/video/8hTixp3-xXE/v-deo.html
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
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.
Hola, el link del proyecto no aparece, no puede hacer el favor de ponerlos bien si se puede? muchas gracias. saludos!
Listo, ya quite la publicidad, saludos!
hola estoy haciendo el mismo eejercicio pero los datos no me aparecen en el datatable
Hola Luis. Por consola que error te aparece? Podes descargar el proyecto.
@@informaticadp no me aparece ningun error solo no me los muestra
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 ??
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?
@@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
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.
Hola, alguien me puede apoyar, tengo problemas para buscar por fecha con data tables y mysql.
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 ?
Es sSearch. Pero para que los queres escapar? El plugin ya hace todo.
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"
}
]
}
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í.
@@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": ""
},
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"
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.
@@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!!
Excelente! Saludos Angel!
Me tira error con status 500 y ya probe de todo :(
la conexion esta bien hecha, es algo de la consulta, les dejo el codigo:
arreglado, descargue los archivos y los copie tal cual cambiando la contraseña a la base de datos y todo perfecto
Excelente!
Do you have an English version tutorial?