Hola chicos me podrían brindar de sus conocimientos y ayudarme, quisiera entender el funcionamiento. Lo que pasa es que tengo un listado donde obtengo datos y entre esos datos hay imágenes, y cuando cargo el listado, primero hace una carga completa de la data al HTML, y después vuelve a su paginación normal, lo cual hace muy lenta la carga de datos, quite el campo Foto, pensando que podría ser eso, pensando que hace una consulta y me trae ejemplo 1000 registros con sus imágenes en su botón modal, quite el campo de imágenes pero igual me carga de la misma manera, hace una carga completa hacía abajo y luego vuelve la paginación. ¿De qué manera puedo controlar esta inconsistencia?, ¿Sera un problema de paginación?, ¿Sera mucha la carga en sql, al traerme esos datos con sus respectivas imágenes?, ¿Sería mejor cargar los datos, pero las imágenes mostrarlas con un enlace a otra view?. Estoy ocupando Django, python3, postgresql.
Consola
127.0.0.1 - - [22/Oct/2020 08:54:35] "GET / HTTP/1.1" 302 -
127.0.0.1 - - [22/Oct/2020 08:54:35] "GET /control-flota/ HTTP/1.1" 302 -
127.0.0.1 - - [22/Oct/2020 08:54:35] "GET /control-flota/iniciar_sesion/?next=/control-flota/ HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:35] "GET /static/assets/mdb/css/mdb.min.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:35] "GET /static/assets/js/jquery.min.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:35] "GET /static/assets/mdb/js/mdb.min.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "POST /control-flota/iniciar_sesion/ HTTP/1.1" 302 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /control-flota/ HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/css/aos.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/mdb/css/bootstrap.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/mdb/css/mdb.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/css/iframes.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/css/selector/estilo.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/js/validaciones/operaciones/valida_op.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/menu_sidebar/assets/css/jquery.mCustomScrollbar.min.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/css/stylecheck.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/js/offline/css/offline-theme-dark-indicator.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/menu_sidebar/assets/css/style.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/datatables.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/dataTables/css/dataTables.bootstrap4.css HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/js/aos.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/js/jquery.mlens-1.7.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/menu_sidebar/assets/js/jquery_migrate_3.0.0.min.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/menu_sidebar/assets/js/jquery.mCustomScrollbar.concat.min.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/menu_sidebar/assets/js/scripts.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/mdb/js/mdb.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/sweet/package/dist/sweetalert2.all.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/datatables.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/buttons/js/dataTables.buttons.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/jSZip/jszip.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/pdfmake/pdfmake.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/pdfmake/vfs_fonts.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/buttons/js/buttons.html5.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/listado_general.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/datatables_custom/datatables/dataTables/js/dataTables.bootstrap4.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/js/validaciones/operaciones/valida_registro_evento.js HTTP/1.1" 304 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/img/report-client.svg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /serviceworker.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/fonts/fa-regular-400.woff2 HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assets/fonts/fa-solid-900.woff2 HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /static/assest/img/subus.png HTTP/1.1" 404 -
127.0.0.1 - - [22/Oct/2020 08:54:37] "GET /control-flota/base_template/ HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:38] "GET /manifest.json HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:54:38] "GET / HTTP/1.1" 302 -
127.0.0.1 - - [22/Oct/2020 08:54:38] "GET /control-flota/ HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:31] "GET /control-flota/listado_general/ HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:31] "GET /serviceworker.js HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:31] "GET /static/assest/img/subus.png HTTP/1.1" 404 -
127.0.0.1 - - [22/Oct/2020 08:55:31] "GET /control-flota/base_template/ HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/JRNlH_Vb2GwAK.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-24_a_las_22.16.22.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/nosotros_yr8GfRO.jpg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-24_a_las_22.18.53_JiDkMAS.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/arbol.jpeg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-10-01_a_las_14.27.54_PRPmwvq.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/iteraciones.jpg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-24_a_las_23.30.15_EJQgBdu.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-29_a_las_11.21.22_jTIHMS1.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/nosotros_bjAc5gn.jpg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Rayon.jpeg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Rayon_uWXppOl.jpeg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-24_a_las_23.30.15_lOR3AZ9.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/JRNlH_0nuZAMN.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Rayon_K0XHKFD.jpeg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/iteraciones_zRwwS7R.jpg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/arbol_2.jpeg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-29_a_las_11.21.22_7FA6uDK.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-24_a_las_23.30.15.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/nosotros.jpg HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-29_a_las_11.21.22_8xPPRk8.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-29_a_las_11.21.22_3b0vftk.png HTTP/1.1" 200 -
127.0.0.1 - - [22/Oct/2020 08:55:33] "GET /media/danos/Captura_de_Pantalla_2020-09-29_a_las_11.21.22_MwNxhxW.png HTTP/1.1" 200 -
..........
Estoy ocupando Datatables JS
$(document).ready( function () {
// LISTADO GENERAL//
$('#listado_general_tabla').DataTable({
"lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50]],
language: {
"lengthMenu": "Mostrar _MENU_ registros",
"zeroRecords": "No se encontraron resultados",
"info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"infoFiltered": "(filtrado de un total de _MAX_ registros)",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "Primero",
"sLast":"Último",
"sNext":"Siguiente",
"sPrevious": "Anterior"
},
"sProcessing":"Procesando...",
},
//para usar los botones
responsive: "true",
dom: 'Bfrtilp',
buttons:[
{
extend: 'excelHtml5',
text: '<i class="fas fa-file-excel"></i> ',
titleAttr: 'Exportar a Excel',
className: 'btn btn-success'
},
{
extend: 'pdfHtml5',
text: '<i class="fas fa-file-pdf"></i> ',
titleAttr: 'Exportar a PDF',
className: 'btn btn-danger'
},
{
extend: 'print',
text: '<i class="fa fa-print"></i> ',
titleAttr: 'Imprimir',
className: 'btn btn-info'
},
]
});
});
HTML
<table class="table" id="listado_general_tabla">
<thead>
<tr>
<th class="text-center text_docus_titulo light-blue darken-4" colspan="17">
OPERACIONES</th>
<th class="text-center text_docus_titulo teal darken-4" colspan="3">RR.HH</th>
<th class="text-center text_docus_titulo mdb-color darken-4" colspan="8">
MANTENIMIENTO
</th>
</tr>
<tr>
<th class="text-center text_docus ">ID</th>
<th class="text-center text_docus ">VER DETALLES</th>
<th class="text-center text_docus ">FECHA SUCESO</th>
<th class="text-center text_docus ">PATIO</th>
<th class="text-center text_docus ">TABLA</th>
<th class="text-center text_docus ">CÓDIGO</th>
<th class="text-center text_docus ">NOMBRE</th>
<th class="text-center text_docus ">INTERNO</th>
<th class="text-center text_docus ">PPU</th>
<th class="text-center text_docus ">TÍPO BUS</th>
<th class="text-center text_docus ">PATIO BUS</th>
<th class="text-center text_docus ">RESPONSABILIDAD</th>
<th class="text-center text_docus">DIAS SIN DECLARACIÓN</th>
<th class="text-center text_docus ">DECLARACIÓN</th>
<!--<th>OBSERVACIÓN DECL.</th> verificar en archivo buses -->
<th class="text-center text_docus ">CLASIFICACIÓN</th>
<th class="text-center text_docus ">FOTOS</th>
<th class="text-center text_docus ">ESTADO MTTO</th>
<th class="text-center text_docus ">FECHA SOLI. RR.HH</th>
<th class="text-center text_docus ">DETERMINACIÓN</th>
<th class="text-center text_docus ">ESTADO</th>
<th class="text-center text_docus ">FECHA REPARACIÓN</th>
<th class="text-center text_docus ">VALORIZACIÓN HH</th>
<th class="text-center text_docus ">VALORIZACIÓN MTTO</th>
<th class="text-center text_docus ">VALORIZACIÓN TOTAL</th>
<th class="text-center text_docus ">DÍAS BÚS NO OPERANDO</th>
<th class="text-center text_docus ">Nº OT 01</th>
<th class="text-center text_docus ">Nº OT 02</th>
<th class="text-center text_docus ">OBSERVACIÓN</th>
</tr>
</thead>
<tbody>
{% for evento in eventos %}
<tr>
<td>{{evento.id}}</td>
<td>
<a class="btn btn-primary modal_disenio06"
href="{% url 'detalle_evento' id=evento.id %}"><i
class="far fa-address-card audi" id="icon_status_foto"></i>
</td>
<td class="text-center " nowrap>
{{evento.fecha_hora_suceso|date:"d/m/Y G:i:s"}}</td>
<td class="text-center " nowrap>{{evento.patio.nombre}}</td>
<td>{{evento.tabla}}</td>
<td>{{evento.conductor.cod_operador}}</td>
<td class="text-center " nowrap>{{evento.conductor.nombre_completo}}
</td>
<td class="text-center " nowrap>{{evento.bus.interno}}</td>
<td class="text-center " nowrap>{{evento.bus.patente}}</td>
<td class="text-center " nowrap>{{evento.bus.tipo}}</td>
<td class="text-center " nowrap>{{evento.bus.patio_actual}}</td>
<td class="text-center " nowrap>
{{evento.get_responsabilidad_display}}
</td>
<td class="text-center " nowrap>{% if evento.declaracion %}
{{evento.declaracion.days_decl_sended}}
{% else %}
{{evento.days_within_decl}}
{% endif %}
dias.</td>
<td class="text-center ">
{% if evento.declaracion %}
<button class="btn btn_descargar_reporte modal_disenio02" data-toggle="modal"
data-target="#modal_declaracion{{evento.id}}" type="button" class="">
<i class="far fa-images audi" id="icon_status_foto"></i>
</button>
{% else %}
<p class="tabla_p">Sin Declaración</p>
{% endif %}
</td>
<td class="text-center aumento_font
{% if evento.clasificacion == 'L' %}
info-color
{% elif evento.clasificacion == 'I' %}
warning-color
{% elif evento.clasificacion == 'G' %}
danger-color
{% endif %}
">
{% if evento.clasificacion %}
{{evento.get_clasificacion_display}}
{% else %}
Sin definir.
{% endif %}
</td>
<td>
<button class="btn btn-deep-purple modal_disenio" data-toggle="modal"
data-target="#evento_registrado{{evento.id}}" type="button">
<i class="far fa-images audi" id="icon_status_foto"></i>
</button>
</td>
<!--CAMBIAR COLORES A LOS ESTADOS DE MTTO **************** -->
<td class="text-center aumento_font text-white
{% if evento.estado_mtto == 'E' %}
info-color
{% elif evento.estado_mtto == 'F' %}
danger-color
{% elif evento.estado_mtto == 'G' %}
danger-color
{% elif evento.estado_mtto == 'H' %}
danger-color
{% elif evento.estado_mtto == 'R' %}
success-color
{% elif evento.estado_mtto == 'S' %}
unique-color
{% elif evento.estado_mtto == 'N' %}
danger-color
{% endif %}
" nowrap>
{% if evento.estado_mtto %}
{{evento.get_estado_mtto_display}}
{% else %}
Sin definir.
{% endif %}
</td>
<td class="text-center " nowrap>
<a rel="tooltip" class="tooltip_style_color" title="{{evento.determinacion.fecha_hora_determinado|date:'d/m/Y G:i:s'}}">
{% if evento.determinacion.fecha_hora_determinado %}
{{evento.determinacion.fecha_hora_determinado|date:"d/m/Y G:i:s"}}
{% else %}
Sin Definir
{% endif %}
</a>
</td>
<td class="text-center text_docus"nowrap>
<a href="#" rel="tooltip" class="tooltip_style_color"
title="{{evento.determinacion.get_tipo_display}}">
{% if evento.determinacion.fecha_hora_determinado %}
{{evento.determinacion.get_tipo_display}}
{% else %}
Sin definir
{% endif %}
</a>
</td>
<td class="text-center text_docus
{% if evento.solicitud_rrhh.get_estado_display == 'Generada' %}
success-color
{% elif evento.solicitud_rrhh.get_estado_display == 'Anulada' %}
warning-color
{% endif %}">
{% if evento.solicitud_rrhh %}
{{evento.solicitud_rrhh.get_estado_display}}
{% else %}
Sin Definir
{% endif %}
</td>
<td class="text-center ">
{% if evento.ultima_reparacion %}
{{evento.ultima_reparacion.fecha_hora_reparacion|date:"d/m/Y G:i:s"}}
{% else %}
Sin Definir
{% endif %}
</td>
<td class="text-center font_table01 ">
{% if evento.valorizacion %}
$ {{evento.valorizacion.valor_hh|localize}}
{% else %}
Sin Definir
{% endif %}
</td>
<td class="text-center font_table01 ">
{% if evento.valorizacion %}
$ {{evento.valorizacion.valor_mtto|localize}}
{% else %}
Sin Definir
{% endif %}
</td>
<td class="text-center font_table01 font-weight-bold text-danger ">
{% if evento.valorizacion %}
$ {{evento.valorizacion.valor_total|localize}}
{% else %}
Sin Definir
{% endif %}
</td>
<td class="text-center font_table01 ">
{% if evento.valorizacion %}
{{evento.valorizacion.dias_bus_no_operando}}
{% else %}
Sin Definir
{% endif %}
</td>
<td class="text-center font_table01 ">
{% if evento.valorizacion %}
{{evento.valorizacion.nro_ot_1}}
{% else %}
Sin Definir
{% endif %}
</td>
<td class="text-center font_table01 ">
{% if evento.valorizacion %}
{{evento.valorizacion.nro_ot_2}}
{% else %}
Sin Definir
{% endif %}
</td>
<td class="text-center font_table01 ">
{% if evento.valorizacion %}
<a data-toggle="tooltip" title="{{evento.valorizacion.observacion}}">
{{evento.valorizacion.observacion|truncatechars:10}}
</a>
{% else %}
Sin Definir
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
View.py
from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse
# Framework de mensajes
from django.contrib import messages
# Clase de parametros como marco de trabajo
from ..parametros import Parameters
# Decorador para hacer que la vista sea obligatoria
from django.contrib.auth.decorators import login_required
# Tiempo
from datetime import datetime
from django.utils import timezone
#Excepciones
from django.core.exceptions import ObjectDoesNotExist
from .. import models
from django.db.models import Q
from ..role_access import role_access
@login_required(login_url='index')
def listado_general(request):
# Restriccion de acceso a usuarios por rol
if role_access(request, 'JOP,AOP,COP,APE,SUB,ADM,GTE'):
return HttpResponseRedirect(reverse('index'))
params = Parameters(request)
eventos = models.Evento.objects.filter(patio=params.getUsuario().patio)
params.add("eventos", eventos)
eventos_aprobados = models.Evento.objects.filter(Q(estado_mtto=models.Evento.EstadoMTTO.REPARADO) | Q(estado_mtto=models.Evento.EstadoMTTO.REPARADO_DET))
params.add("eventos_aprobados", eventos_aprobados)
fotosdanos = models.FotoDano.objects.all()
params.add("fotodanos", fotosdanos)
fotosreparaciones = models.FotoReparacion.objects.exclude(reparacion__evento=None)
params.add("fotosreparaciones", fotosreparaciones)
############################ EN ESPERA ##############################################
determinaciones_en_espera = models.Determinacion.objects.filter(fecha_hora_finalizado=None)
eventos_determinacion_en_espera = []
if determinaciones_en_espera:
for determinacion in determinaciones_en_espera:
eventos_determinacion_en_espera.append(models.Evento.objects.get(determinacion=determinacion))
params.add("eventos_determinacion_en_espera", eventos_determinacion_en_espera)
#####################################################################################
return render(request, 'report_app/listado_general/listado_general.html', params.get())