3

Uso Django 2.0 para mis proyectos, y tengo templates en dónde el cliente necesita tener un filtro antes de cargar el listado de objetos, es decir, filtrar por fecha, usuario, estado, etc.

He creado una vista la cual sólo carga el template con los filtros creados con un form de Django.

def orden_filter(request):
    import datetime

    initial_date = datetime.date.today()
    tecnicos = Usuario.objects.filter(user__groups__name='Tecnicos', empresa=request.user.usuario.empresa)

    orden_filter_form = OrdenFilter(tecnicos, initial={'ingreso_desde':initial_date})
    context = {
        'orden_filter_form': orden_filter_form,
    }
    return render(request, 'reparaciones/orden_filter.html', context)

Y este es el form:

class OrdenFilter(forms.Form):
    orden = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'ID de orden'}), required=False)
    cedula = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'CI o RUC'}), required=False)
    nombres = forms.CharField(widget=forms.TextInput(), required=False)
    apellidos = forms.CharField(widget=forms.TextInput(), required=False)
    ingreso_desde = forms.DateField(widget=DateInput(attrs={'class':'order_filter_field'}))
    ingreso_hasta = forms.DateField(widget=DateInput(attrs={'class':'order_filter_field'}))
    estado = forms.ChoiceField(widget=forms.Select(attrs={'class':'order_filter_field'}))
    tecnico = forms.ChoiceField(widget=forms.Select(attrs={'class':'order_filter_field'}))


    widgets = {
        'ingreso_desde': DateInput(),
        'ingreso_hasta': TimeInput(),
    }

    def __init__(self, tecnicos, *args, **kwargs):
        super(OrdenFilter, self).__init__(*args, **kwargs)

        # Querys
        tecnicos = list(tecnicos.values_list('pk', 'user__username'))
        estados  = list(Estado.objects.all().values_list('pk', 'estado'))

        # Insert empty value 0
        tecnicos.insert(0, ('', '--------------'))
        estados.insert(0, ('', '--------------'))
        # Set choices to query with pk
        self.fields['tecnico'].choices = tecnicos
        self.fields['estado'].choices = estados

        # Set required False
        self.fields['tecnico'].required=False
        self.fields['estado'].required=False
        self.fields['ingreso_desde'].required=False
        self.fields['ingreso_hasta'].required=False

Al hacer clic en buscar carga via Ajax los resultados y los adjunto a un div con Jquery. Este listado está de forma correcta.

Funcion JS:

$('#btn_buscar_ordenes').click(function(event){
    event.preventDefault();
    buscar_ordenes()
    $('#div_content').show(500)
});

function buscar_ordenes() {
    // data post
    // request_url = $(this).attr('action')
    request_url = '/reparaciones/result_list/'
    let orden = $('#id_orden').val()
    let cedula = $('#id_cedula').val()
    let nombres = $('#id_nombres').val()
    let apellidos = $('#id_apellidos').val()
    let ingreso_desde = $('#id_ingreso_desde').val()
    let ingreso_hasta = $('#id_ingreso_hasta').val()
    let estado = $('#id_estado').val()
    let tecnico = $('#id_tecnico').val()

    $.ajax({
        type: "POST",
        dataType: "html",
        url: request_url,
        data: {ingreso_desde: ingreso_desde,
                orden: orden,
                cedula: cedula,
                nombres: nombres,
                apellidos: apellidos,
                ingreso_hasta: ingreso_hasta,
                estado: estado,
                tecnico: tecnico,
                },
        success: function(data){
            // console.log(data)
            $('#orders_content').html(data)
        },
        error: function(xhr,errmsg,err){
            console.log('ERROR');
            console.log(xhr.status + ": " + xhr.responseText);
        }
    })

Ahora dentro de este listado están botones con las acciones generales para un objeto (editar, ver, eliminar).

<td align="center">
        <!-- Edit -->
        <a href="{% url 'reparaciones:edit' orden.pk %}">
          <span class="btn btn-primary btn-xs glyphicon glyphicon-edit" aria-hidden="true" title="Edit"></span>
        </a>
        <!-- View -->
        <a href="{% url 'reparaciones:detail' orden.pk %}">
          <span class="btn btn-success btn-xs glyphicon glyphicon-search" aria-hidden="true" title="Ver"></span>
        </a>
        <!-- Delete -->
        <a href="{% url 'reparaciones:delete' orden.pk %}">
          <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" aria-hidden="true" title="Eliminar"></span>
        </a>
      </td>

Al entrar a editar o ver un objeto, se actualiza de manera correcta, pero al volver al listado aparece sólo el template con los filtros, sin el listado, lo cual es tedioso para el usuario volver a elegir los campos para volver a generar el listado deseado. He intentado volver utilizando una variable llamada previous_url:

@login_required
def edit_orden(request, pk):
    print('FULL PATH')
    print(request.get_full_path())
    print('PREVIOUS URL')
    previous_url = request.META.get('HTTP_REFERER')
    print(previous_url)

Y en el boton de "Volver" asignando esta variable:

<a href="{{ previous_url }}" class="btn btn-success">Volver</a>

Pero carga el filtro con los campos vacíos y sin la tabla.

Mi pregunta es si hay alguna forma de volver a la página anterior que ya tenga el listado cargado previamente con Ajax, o alguna otra forma de hacerlo?

Agradezco mucho su ayuda.

Saludos.

6
  • 1
    Estaría bueno que dejes el código de, tanto los filtros como de tu botón volver, para poder analizarlo en búsqueda de una solución, sino es muy complicado ayudarte Commented el 17 may. 2018 a las 21:12
  • Adjuntaré el código a continuación. Muchas gracia @JuanSalvadorPortugal Commented el 18 may. 2018 a las 15:12
  • Una pregunta: Al editar o eliminar una fila, cuando vuelves a la pagina inicial, quieres cargar de nuevo la tabla con los mismos filtros iniciales?, si es así, quizá tenga una idea de como hacerlo, según como lo estas trabajando.
    – LuiscYm
    Commented el 18 may. 2018 a las 16:27
  • @LuiscYm exactamente. El usuario me solicita que regrese a la pagina anterior sin cargar nuevamente todos los datos, puesto que en ocasiones son miles de datos. Commented el 18 may. 2018 a las 23:39
  • 1
    En ese caso, seria bueno realizarlo por ajax, además en cuanto a la cantidad de registros te recomendaría que emplees paginación para mayor rapidez en la carga de información, y Django tiene una clase muy buena para este propósito. Te dejo un link con este tema por si te interesa implementarlo programante.com/paginando-con-django
    – LuiscYm
    Commented el 19 may. 2018 a las 2:13

2 respuestas 2

1

yo lo resolvería haciendo todo (ver, editar, eliminar) con ajax usando un modal, y solo recargar la tabla con las actualizaciones, Pero tu ya lo tienes a tu manera, y en ese caso yo lo resolveria usando sessionStorage, para no perder los filtros de búsqueda, te dejo el código de ejemplo (nota: no lo pude testear, espero te sirva):

// Iniciar la busqueda
function initBuscar() {
$('#btn_buscar_ordenes').click(function(event){
    event.preventDefault();

    // Guardar los parametros en sessionStorage
    sessionStorage.setItem('orden', $('#id_orden').val())
    sessionStorage.setItem('cedula', $('#id_cedula').val())
    sessionStorage.setItem('nombres', $('#id_nombres').val())
    sessionStorage.setItem('apellidos', $('#id_apellidos').val())
    sessionStorage.setItem('ingreso_desde', $('#id_ingreso_desde').val())
    sessionStorage.setItem('ingreso_hasta', $('#id_ingreso_hasta').val())
    sessionStorage.setItem('estado', $('#id_estado').val())
    sessionStorage.setItem('tecnico', $('#id_tecnico').val())

    buscar_ordenes()
    $('#div_content').show(500)
});}; 

El ajax de la busqueda:

function buscar_ordenes() {
    let request_url = '/reparaciones/result_list/'

    $.ajax({
        type: "POST",
        dataType: "html",
        url: request_url,
        data: {ingreso_desde: sessionStorage.getItem('ingreso_desde'),
               orden: sessionStorage.getItem('orden'),
               cedula: sessionStorage.getItem('cedula'),
               nombres: sessionStorage.getItem('nombres'),
               apellidos: sessionStorage.getItem('apellidos'),
               ingreso_hasta: sessionStorage.getItem('ingreso_hasta'),
               estado: sessionStorage.getItem('estado'),
               tecnico: sessionStorage.getItem('tecnico'),
            },
        success: function(data){
           // console.log(data)
           $('#orders_content').html(data)
        },
        error: function(xhr,errmsg,err){
           console.log('ERROR');
           console.log(xhr.status + ": " + xhr.responseText);
        }
});};

El botón volver debería quedar como:

<a href="#" id="volver" data-url="{{ previous_url }}" class="btn btn-success">Volver</a>

Y para la funcionalidad de volver:

function volver() {
    let _this = this
    $('#volver').click(function(event){
        event.preventDefault();

        window.location.replace($(this).data('url'));

        // Repoblar los campos con los filtros
        $('#id_orden').val(sessionStorage.getItem('orden'))
        $('#id_cedula').val(sessionStorage.getItem('cedula'))
        $('#id_nombres').val(sessionStorage.getItem('nombres'))
        $('#id_apellidos').val(sessionStorage.getItem('apellidos'))
        $('#id_ingreso_desde').val(sessionStorage.getItem('ingreso_desde'))
        $('#id_ingreso_hasta').val(sessionStorage.getItem('ingreso_hasta'))
        $('#id_estado').val(sessionStorage.getItem('estado'))
        $('#id_tecnico').val(sessionStorage.getItem('tecnico'))

        // Obtener la tabla
        _this.buscar_ordenes();
        $('#div_content').show(500)
   });};
0

Piensa en esto, tienes un formulario que lo manipulas y lo validas por medio de "POST", envía la información y el servidor retorna el formulario con la información "ligada". Mi solución es guardar el formulario para posteriormente volverlo a presentar cuando vuelvas dar click en volver atrás o bien pasarle los params via "GET" así poder volver presentar el formulario con la información anterior.

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.