mi problema es que al momento de integrar datatables.net a mi componente VUE, me aparece lo siguiente:(imagen de abajo), pero al momento de usar la busqueda se queda en blanco
-
1deberías poner el código como texto y no con imágenes, es más fácil para que podamos probar tu código– user7176el 4 oct. 2018 a las 7:52
-
@blonfu sorry, es mi tercer post y la verdad aun no entiendo muy bien la manera correcta de hacer los post– yamile ibarrael 4 oct. 2018 a las 13:05
-
Entonces deberías leer el centro de ayuda para enterder mejor cómo funciona el sitio. Aun así sigues sin poner el código en texto, solo tienes que editar la pregunta y poner el código en lugar de las imágenes– user7176el 4 oct. 2018 a las 18:14
-
Te he votado negativamente porque una captura del código no es de ayuda.– Manuco Biancoel 12 sep. 2019 a las 20:42
2 respuestas
Después de mucho encontré una posible respuesta,
solo basta agregar Update
updated: function () {
this.$nextTick(function () {
$('#usuarios1').DataTable({
'destroy' :true,
'stateSave' : true,
}).draw();
})
}
esto va antes de los metodos, y las consultas de axios tienen que estar en "let"
let data1 =axios.get("api/user").then((response)=>{ this.roles = response.data.roles});
para que vue pueda enviar la informacion a DataTables
-
Luego de casi 1 año y tu pregunta sigue con imágenes, si tienes chance de poner código en texto y darle formato, enhorabuena :D– fredyfxel 12 sep. 2019 a las 20:30
Intenta que en vez de llenar la tabla en el template
, lo hagas por JS.
var data = [
[
"Yamile Ibarra xxxxxx",
"[email protected]",
"xxxxxxxxxxxxxxxxxxxx",
"xxxxxxxxxxxxxxxxxxxx",
"xxxxxxxxxxxxxxxxxxxx",
],
[
"Jorge xxxxxxx",
"[email protected]",
"xxxxxxxxxxxxxxxxxxxx",
"xxxxxxxxxxxxxxxxxxxx",
"xxxxxxxxxxxxxxxxxxxx",
],
...
];
$('#usuarios1').DataTable( {
data: data,
...
} );
Fuente: https://datatables.net/manual/data/#Arrays
Saludos!
-
temo que por java no podría ya que traigo los datos en un JASON y luego ya selecciono que es lo que quiero mostrar pero lo que he notado es que si uso el v-for, me aparecen fuera de la tabla pero si los pongo manualmente si aparecen dentro de la tabla el 3 oct. 2018 a las 21:03
-
Eso es debido a que cuando se carga el DOM, DataTables carga todos los elementos que tenga tu tabla. Al añadirlos de forma dinamica lo que ocurre es que no le das chance de incializar los valores por defecto. Lo que tienes que hacer es buscar la forma de añadir los valores por JS o bién re-inicializar la tabla una vez obtengas los valores por Ajax. Saludos! el 3 oct. 2018 a las 22:08
-
si es lo que estaba pensando, al parecer el ' this.$nextTick(' es lo que hace, vuelve a inicializar los valores del DOM, pero creo que ahi donde esta no debe de estar :S el 4 oct. 2018 a las 13:14
-
Intenta colocarlo dentro del metodo
watch
, en donde todo el rato estes "observando" a las variablesuser
yroles
cada que cambien su valor. Y simplemente agrega esa información a la datatable por medio del codigo que te dí en mi respuesta ()$('#usuarios1').DataTable( {data: data, ... } );
el 4 oct. 2018 a las 16:01