3

Tengo un modelo al cual he llamado Empleado el cual tiene una llave foránea hacia un modelo Direccion para conservar un histórico de las direcciones del empleado.

Serializer:

from rest_framework import serializers
from models import Empleado, Direccion


class DireccionSerializer(serializers.ModelSerializer):

    class Meta:
        model = Direccion
        fields = ('id', 'pais', 'estado', 'municipio', 'ciudad', 'calle', 'colonia', 'numero_interior',
              'numero_exterior', 'codigo_postal', 'datos_adicionales')


class EmpleadoSerializer(serializers.ModelSerializer):

    direccion = DireccionSerializer()

    class Meta:
        model = Empleado
        fields = ('id', 'nombre', 'apellido_paterno', 'apellido_materno', 'fecha_nacimiento', 'rfc', 'curp',
              'direccion')

Por ahora estoy mostrando los registros de Empleado en una tabla con el siguiente ciclo:

{% for empleado in object_list %}
<tr>
     <td> {{ empleado.id }}</td>
     <td> {{ empleado.nombre }} </td>
     <td> {{ empleado.apellido_paterno }} </td>
     <td> {{ empleado.apellido_materno }} </td>
     <td> {{ empleado.fecha_nacimiento|date:"Y-m-d" }} </td>
     <td> {{ empleado.curp }} </td>
     <td> {{ empleado.rfc }} </td>

     <td>
     {{ empleado.direccion.get_full_information|truncatechars:30 }}
     </td>

 </tr>

{% endfor %}

Construí la siguiente vista:

class EmpleadosListApi(ListAPIView):
    serializer_class = EmpleadoSerializer

    def get_queryset(self):
        return Empleado.objects.filter(activo=1).order_by('id')

Y quiero renderizar el JSON en la tabla en lugar de usar los tags de Django. Intenté hacerlo con un ejemplo que encontré en Internet usando el atributo data-field de Bootstrap pero no se realizar lo que requiero y no he encontrado de qué manera hacerla. Es la primera vez que trabajo con APIS, soy bastante nueva.

2 respuestas 2

3

Bootstrap por si mismo no acepta esas propiedades, pero puedes usar la librería bootstrap tables, es decir, necesitas agregar las referencias a su CSS y JS, además de invocarlo según necesites

Por ejemplo desde un json directo (desde la documentación oficial) donde data-field es el nombre del elemento en json.

Es importante notar que se genera con el siguiente código:

$(function () {
    $('#table').bootstrapTable({
       data: data
    });
});

Donde (con Jquery) al cargarse la página se selecciona el elemento HTML de la tabla mediante el id y se aplica el json que esta en la variable data con el método bootstrapTable

En tu caso tendrías que aplicarlo cuando obtengas la información de tu json (asumo que en el success de tu ajax) y no olvides convertirlo a un objeto javascript ya que muy probablemente lo obtengas como texto

1
  • Gracias, por lo pronto lo solucioné de una manera algo rústica, voy a aplicar tu respuesta a ver como me va. Acabo de responder mi propia pregunta. Commented el 3 feb. 2016 a las 22:09
0

Gracias, lo hice llamando los items del JSON e inyectado los atributos a las etiquetas <td>, espero que a alguien le sirva.

<script>
$(document).on('ready',function(){
    $.ajax({url: "{% url 'empleados:empleados_list_api' %}",
        data:{lista: 'empleados'},
        dataType:"json",
        type:"GET"
    }).done(function(data){

        $.each(data, function(index, item){

            var direccion = '';
            var fdireccion = '';
            if (item.direccion.calle.length != 0)direccion += item.direccion.calle;
            if (item.direccion.numero_interior.length != 0)direccion += ' No. Int. ' + item.direccion.numero_interior;
            if (item.direccion.numero_interior.length != 0 && item.direccion.numero_exterior.length != 0)direccion += ' ,';
            if (item.direccion.numero_exterior.length != 0)direccion += ' No. Ext. ' + item.direccion.numero_exterior;
            if (item.direccion.colonia.length != 0)direccion += ', Colonia ' + item.direccion.colonia;
            if (item.direccion.codigo_postal.length != 0)direccion += ', C.P. ' + item.direccion.codigo_postal;
            if (item.direccion.ciudad.length != 0)direccion += ', ' + item.direccion.ciudad;
            if (item.direccion.municipio.length != 0)direccion += ', ' + item.direccion.municipio;
            if (item.direccion.estado.length != 0)direccion += ', ' + item.direccion.estado;
            if (item.direccion.pais.length != 0)direccion += ', ' + item.direccion.pais;
            if (direccion.length>30)fdireccion = $.trim(direccion).substring(0, 30).split(" ").slice(0, -1).join(" ") + "...";
            else fdireccion=direccion;
            var $tr = $('<tr>').append(
                    $('<td>').text(item.id),
                    $('<td>').text(item.nombre),
                    $('<td>').attr({'class':'hidden-xs','style':'width: 15%;'}).text(item.apellido_paterno),
                    $('<td>').attr({'class':'hidden-xs','style':'width: 15%;'}).text(item.apellido_materno),
                    $('<td>').attr({'class':'hidden-xs','style':'width: 15%;'}).text(item.fecha_nacimiento),
                    $('<td>').attr({'class':'hidden-xs','style':'width: 15%;'}).text(item.curp),
                    $('<td>').attr({'class':'hidden-xs','style':'width: 15%;'}).text(item.rfc),
                    $('<td>').attr({'class':'hidden-xs','style':'width: 15%;','data-toggle':'tooltip','title':''+direccion}).text(fdireccion),
                    $('<td>').attr('class','text-center').append(
                            $('<div>').attr('class','btn-group').append(
                                $('<a>').attr(
                                        {   'class':'btn btn-xs btn-default',
                                            'type':'button',
                                            'data-toggle':'tooltip',
                                            'title':'Editar Empleado'
                                        }
                                ).append(
                                        $('<i>').attr('class','fa fa-pencil')).data('id',item.id).click(function(){
                                    var id = $(this).data('id');
                                    window.location = 'edit/'+item.id;
                                }),
                                $('<a>').attr(
                                        {   'class':'btn btn-xs btn-default',
                                            'type':'button',
                                            'data-toggle':'tooltip',
                                            'title':'Eliminar Empleado'
                                        }
                                ).append(
                                        $('<i>').attr('class','fa fa-times')).data('id',item.id).click(function(){
                                    var id = $(this).data('id');
                                    window.location = 'delete/'+item.id;
                                })
                            ))
            ).appendTo('#tabla_lista_empleados');
        });
    });
});
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.