JQuery - Creando un datatable dinamico desde jquery

 
Vista:
sin imagen de perfil
Val: 17
Ha disminuido 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

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

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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 142
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Creando un datatable dinamico desde jquery

Publicado por Horroroso (60 intervenciones) el 16/11/2017 17:20:21
Hola,

Intenta crear el datatable despues de llenar los datos, es decir, despues de:
1
$("#example tbody").html($filas);

añade:
1
$("#example").DataTable();

Si se van a estar modificando dinamicamente los datos a traves de ajax, tal vez sea recomendable destruir el DataTable antes de volverlo a generar,

Esto se puede hacer de la siguiente forma:
1
2
3
4
5
6
7
8
9
10
11
var table = $('#example').DataTable();
$.ajax
({
....
....
table.destroy();
$("#example tbody").html($filas);
table=$('#example').DataTable();
...
...
)}

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 17
Ha disminuido 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

Creando un datatable dinamico desde jquery

Publicado por Jose Angarita (11 intervenciones) el 17/11/2017 02:29:16
Hola amigo.... en efecto si el datatable ya existe pues al estar cargando los datos de manera dinámica no toma las funcionalidades, la solución fue tal cual lo planteaste, destruir el datatable y volverlo a crear...Maravilloso.

Muchas gracias..seguimos avanzando en lo que necesito hacer para terminar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar