Creando un datatable dinamico desde jquery
Publicado por Jose (11 intervenciones) el 15/11/2017 04:28:37
Saludos a todos en la comunidad,
Hoy les traigo algo que espero me puedan ayudar a realizar, resulta que estoy creando un datatable dinamico desde jquery les muestro algo de codigo.
Mi vista
Archivo JS donde hago la operacion de crear el datatable dinamico:
Bien amigos el asunto es este: Estoy cargando informacion en un datatable partiendo desde un archivo excel, el datatable se carga dinamicamente es decir, que a traves de jquery cargo mi datatable sin problemas...
El asunto es algo mas curioso que no se como resolver...resulta que estoy usando un plugin adicional para darle estilo, paginacion etc.... a mi tabla, el plugin se llama Datatable: https://datatables.net/ resulta que antes yo estaba cargando los datos desde el servidor a mi vista usando PHP y el plugin me mostraba en la tabla la paginacion, la cantidad de archivos registrados y todo de manera perfecta.
Adjunto imagen #1 de como se muestra la carga de información del servidor a la vista usando PHP
Luego de intentar de hacer la carga del datatable usando Jquery y ajax, la funcionalidad se perdio, no me pagina, no me muestra la cantidad de registros ni nada de nada, se que hay una manera de tratar los elementos en el DOM de manera tal que pareciera que se hubieran generado naturalmente sin ningún tipo de alteración (no se si me entienden).
Adjunto imagen #2 de como me muestra ahora el datatable cuando se carga informacion usando AJAX.
La inquietud me nace porque despues me di cuenta que si quiero interactuar con el elemento que he creado usando ajax (querer hacer clic en una celda de la tabla o algo por el estilo) nada me funciona, asumo que es debido a la forma en la que estoy generando el Datatable, no lo estoy haciendo de la manera correcta...
Tal vez se preguntaran? por que si te funcionaba anteriormente decides cargar el datatable usando Jquery????...es que estoy trabajando un tema de validaciones y para poder validar el datatable antes de que se cargue debo generarlo entonces usando Jquery - Ajax y no solo php...
Espero me puedan ayudar, si no me entienden la inquietud por favor diganmelo...tengo bastante rato intentando resolver el enigma y no doy pie con bola.
De antemano muchas gracias.
Hoy les traigo algo que espero me puedan ayudar a realizar, resulta que estoy creando un datatable dinamico desde jquery les muestro algo de codigo.
Mi vista
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="tabla" class="table-responsive">
<table id="example" class="table">
<thead>
<tr>
<th>Albaran</th>
<th>Destinatario</th>
<th>Direccón</th>
<th>Población</th>
<th>Cp</th>
<th>Provincia</th>
<th>Telefono</th>
<th>Observaciones</th>
<th>Fecha</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Archivo JS donde hago la operacion de crear el datatable dinamico:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
$.ajax({
url:'./subirfichero',
type:'post',
dataType:'json',
data:formData,
cache:false,
contentType:false,
processData:false,
success: function (data)
{var $resultado=data.request;
var $filas='';
$.each($resultado, function(index,value)
{$.each(value, function(indice,valor)
{var $albaran= '<td class=".edit" title="">'+valor.albaran+'</td>';
var $destinatario= '<td class=".edit" title="">'+valor.destinatario+'</td>';
var $direccion= '<td class=".edit" title="">'+valor.direccion+'</td>';
var $poblacion= '<td class=".edit" title="">'+valor.poblacion+'</td>';
var $cp= '<td class=".edit" title="">'+valor.cp+'</td>';
var $provincia= '<td class=".edit" title="">'+valor.provincia+'</td>';
var $telefono= '<td class=".edit" title="">'+valor.telefono+'</td>';
var $observaciones= '<td class=".edit" title="">'+valor.observaciones+'</td>';
var $fecha= '<td class=".edit" title="">'+valor.fecha.date+'</td>';
$filas+='<tr class="odd" role="row">';
$filas+=$albaran;
$filas+=$destinatario;
$filas+=$direccion;
$filas+=$poblacion;
$filas+=$cp;
$filas+=$provincia;
$filas+=$telefono;
$filas+=$observaciones;
$filas+=$fecha;
$filas+='</tr>';
console.log(valor);
console.log($albaran);
})
});
$("#example tbody").html($filas);
},
error: function (e)
{alert("Hubo un error al intentar cargar: "+e);
$("#bar").hide();
location.reload();
}});
Bien amigos el asunto es este: Estoy cargando informacion en un datatable partiendo desde un archivo excel, el datatable se carga dinamicamente es decir, que a traves de jquery cargo mi datatable sin problemas...
El asunto es algo mas curioso que no se como resolver...resulta que estoy usando un plugin adicional para darle estilo, paginacion etc.... a mi tabla, el plugin se llama Datatable: https://datatables.net/ resulta que antes yo estaba cargando los datos desde el servidor a mi vista usando PHP y el plugin me mostraba en la tabla la paginacion, la cantidad de archivos registrados y todo de manera perfecta.
Adjunto imagen #1 de como se muestra la carga de información del servidor a la vista usando PHP
Luego de intentar de hacer la carga del datatable usando Jquery y ajax, la funcionalidad se perdio, no me pagina, no me muestra la cantidad de registros ni nada de nada, se que hay una manera de tratar los elementos en el DOM de manera tal que pareciera que se hubieran generado naturalmente sin ningún tipo de alteración (no se si me entienden).
Adjunto imagen #2 de como me muestra ahora el datatable cuando se carga informacion usando AJAX.
La inquietud me nace porque despues me di cuenta que si quiero interactuar con el elemento que he creado usando ajax (querer hacer clic en una celda de la tabla o algo por el estilo) nada me funciona, asumo que es debido a la forma en la que estoy generando el Datatable, no lo estoy haciendo de la manera correcta...
Tal vez se preguntaran? por que si te funcionaba anteriormente decides cargar el datatable usando Jquery????...es que estoy trabajando un tema de validaciones y para poder validar el datatable antes de que se cargue debo generarlo entonces usando Jquery - Ajax y no solo php...
Espero me puedan ayudar, si no me entienden la inquietud por favor diganmelo...tengo bastante rato intentando resolver el enigma y no doy pie con bola.
De antemano muchas gracias.
- Anexos.rar(307,2 KB)
Valora esta pregunta
0