Excelente material muchas gracias por tu valioso aporte. Tengo una duda como se hace para usar una columna con botones personalizados para el editar y eliminar? como se agregan esas funciones ya que cuando se cuando se renderiza se pueden crear botones también pero las funciones cuando se de clic en que parte se agregarían?
Con base a tu ejemplo como se agregaría una fila en el tfoot del DataTable pero que muestre la suma de los precios? Me fue muy útil tu video, gracias. Ojala puedas responderme
Si se quisiera agregar una fila por debajo que calcule los totales de cada columna en el datatables como seria, como se configuran los buttons para que tengan diferentes opciones y funcionalidades a la hora de hacer un print?
Buenas tardes esta excelente pero como se haría para poner botones en cada fila obtener los valores del row? Yo también tengo esa duda. Gracias de antemano
Me enfoqué a mostrar el cómo utilizar el componente DataTables que lo hice como en la v anterior, no cambia mucho, si tengo pensado actualizar ese video
@programandocondancruise Un favor. Use tal cual las librerias de DataTable. Las instale con el npm y las importe y no carga la tabla de forma reactiva. Me sale un error: [Vue warn]: Failed to resolve component: DataTable en la consola. Ayuda Porfa
Puedes renderizar los botones de acción en un tu tabla de la siguiente manera: const columns = [ { data: 'id', name: 'id' }, { data: 'name', name: 'name'}, { data: 'created_at', name: 'created_at'}, { data: null, orderable: false, render: function (data) { return ('Editar'); }, }, ] después añades a tu archivo la siguiente importación import { ref, onMounted } from 'vue'; en mi caso agregue al botón una clase llamada department para poder acceder a toda la colección de botones. // accedemos a toda la coleccion de los botones del datatable const departmentRow = document.getElementsByClassName('department'); // dentro de esta funcion recorremos todos los botones y le damos un evento click a cada boton onMounted(() => {
for (const element of departmentRow) { let boton = element; // accedemos a cada boton y agregamos evento click boton.addEventListener("click", function(event) { event.preventDefault(); let id = boton.getAttribute("dataId"); // obtenemos los atributos de cada boton let name = boton.getAttribute("dataName"); if (name) { deleteDeparment(id, name); // llamamos la funcion que ya teniamos creada } else { window.location.href = '/departments/' + id + '/edit'; } }); } }) Espero te sirva y me haya hecho entender
Qué tal, solo instalé lo que usé, sus extensiones bien funcionan con vue 3, tengo otro video donde se utiliza con botones de acción ruclips.net/video/Fwc2VOWJQcA/видео.htmlsi=vhJwgFhYlX0F7EyN
Qué tal, revisa en consola si te marca algún error, igual podrías mandarme captura por face o revisar en el repositorio el código puede que haya algún error de dedo
Hermano me has salvado con tu video, no pase del minuto 4 pero es facil de implementar a diferencia de otros tutoriales, gracias
Capo, genio total, estaba buscando esto hace 1 hora. Muchas gracias!
Que bueno que este aporte te haya servido 👍
Muchas gracias por tu video. Saludos
Gracias muchas 😊
Excelente material muchas gracias por tu valioso aporte. Tengo una duda como se hace para usar una columna con botones personalizados para el editar y eliminar? como se agregan esas funciones ya que cuando se cuando se renderiza se pueden crear botones también pero las funciones cuando se de clic en que parte se agregarían?
Buenas tardes esta excelente pero como se haría para poner botones en cada fila obtener los valores del row?
🙌🙌🙌 Estaba importando mal, era windows.JSZip, tenia la s en minúscula. Gracias
Suele pasar ntp… que bueno que ya salió 😃
¿Hay una librería para hacerlo con server side laravel?
Disculpa, pudiste resolver este detalle?, estoy tratando de hacer lo mismo pero no lo logré hasta el momento, te agradezco tu respuesta de antemano.
Con base a tu ejemplo como se agregaría una fila en el tfoot del DataTable pero que muestre la suma de los precios? Me fue muy útil tu video, gracias. Ojala puedas responderme
Si se quisiera agregar una fila por debajo que calcule los totales de cada columna en el datatables como seria, como se configuran los buttons para que tengan diferentes opciones y funcionalidades a la hora de hacer un print?
Buenas tardes esta excelente pero como se haría para poner botones en cada fila obtener los valores del row?
Yo también tengo esa duda. Gracias de antemano
Tengo algo similar en este video:
DataTables botones editar y eliminar en CRUD Laravel 10 Vue 3 con Inertia
ruclips.net/video/Fwc2VOWJQcA/видео.html
@@programandocondancruise se puede utilizar para consumir una api de django api rest frameworks y mostrar en esas tablas ?
genial bro mil gracias. preguna: como perzonalizo el titulo con el que se exporta la tabla?
Amigo como pudierse hacer el formato de moneda si tengo :
{ text: "Monto ($)", value: "amount"}
Falto poner la columna de opciones para poner botones personalizados pero gran video, me aclaro varias cosas
Tienes razón eso no lo incluí lo tomaré en cuenta para una posible actualización del video gracias 👍
Tiene para editar casillas con doble click?
Tengo un video en el cual se hace con botón pero lo podrías adaptar al evento doble click
ruclips.net/video/Fwc2VOWJQcA/видео.html
Gracias, solo una preguntica :
Porque no usas el composition api ?
Me enfoqué a mostrar el cómo utilizar el componente DataTables que lo hice como en la v anterior, no cambia mucho, si tengo pensado actualizar ese video
Me equivoco o estás trayendo todos los registros que te de el servidor?
Si es así, y hay 4 millones de registros sería un problema. Me equivoco?
@programandocondancruise Un favor. Use tal cual las librerias de DataTable. Las instale con el npm y las importe y no carga la tabla de forma reactiva. Me sale un error:
[Vue warn]: Failed to resolve component: DataTable en la consola. Ayuda Porfa
Qué tal, me podrías mandar captura del error que te marca por Facebook por favor facebook.com/share/uZHjcctMDG4XQ8Zf/?mibextid=%22%22
@@programandocondancruise ya te mande
¿Tendría un ejemplo usando los botones de acción, ejemplo eliminar y editar?
Hola, por el momento no, pero te puedo compartir código de cómo quedaría, si gustas escribirme: facebook.com/programandocondancruise?mibextid=LQQJ4d
ruclips.net/video/Fwc2VOWJQcA/видео.html
Puedes renderizar los botones de acción en un tu tabla de la siguiente manera:
const columns = [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name'},
{ data: 'created_at', name: 'created_at'},
{
data: null, orderable: false,
render: function (data) {
return ('Editar');
},
},
]
después añades a tu archivo la siguiente importación import { ref, onMounted } from 'vue';
en mi caso agregue al botón una clase llamada department para poder acceder a toda la colección de botones.
// accedemos a toda la coleccion de los botones del datatable
const departmentRow = document.getElementsByClassName('department');
// dentro de esta funcion recorremos todos los botones y le damos un evento click a cada boton
onMounted(() => {
for (const element of departmentRow) {
let boton = element;
// accedemos a cada boton y agregamos evento click
boton.addEventListener("click", function(event) {
event.preventDefault();
let id = boton.getAttribute("dataId"); // obtenemos los atributos de cada boton
let name = boton.getAttribute("dataName");
if (name) {
deleteDeparment(id, name); // llamamos la funcion que ya teniamos creada
} else {
window.location.href = '/departments/' + id + '/edit';
}
});
}
})
Espero te sirva y me haya hecho entender
Las extensiones que ofrece el datatables son compatibles con vue3 o no las instalaste porque no las ibas a usar?
Qué tal, solo instalé lo que usé, sus extensiones bien funcionan con vue 3, tengo otro video donde se utiliza con botones de acción
ruclips.net/video/Fwc2VOWJQcA/видео.htmlsi=vhJwgFhYlX0F7EyN
@@programandocondancruise muchas gracias!
very good thank you
👍😃
Mano disculpa pero esa forma de trabajar no es de vue 3 es de vue 2, porque no estás utilizando las composition api
muchas gracias por el video! tengo un problema y es que me sigue apareciendo la barra de desplazamiento luego de ponerle el autoWidth: false
Qué tal, revisa en consola si te marca algún error, igual podrías mandarme captura por face o revisar en el repositorio el código puede que haya algún error de dedo
@@programandocondancruise gracias por responder, no me tira ningun error por consola, te escribo por face
Buenas excelente proyecto, podrías hacerlo para ReactJS. Muchas gracias de antemano.
Gracias … cuando lo tenga te comparto la liga