Reputation: 106
I start a new Django project. I want to use Jquery Datatable but loading time for button is very slow.
I try to look at firefox debug tool/networks to see what is so long to load but don't see any library that seems to be long to load (see image)
I also try to suppress library one by one to see which one slow loading but it is probabley not the good way to test...
base.html
{% load static i18n %}
{% load static %}
{% load widget_tweaks %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% block extrahead %}{% endblock %}
<title>{% block title %}Mereva{% endblock %}</title>
</head>
<body>
{% include 'layouts/_nav.html' %}
{% block content %}{% endblock %}
{% include 'layouts/_footer.html' %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
{% block extrabody %}{% endblock %}
<script>
// 'correction' affichage chrome
if (navigator.userAgent.indexOf("Chrome") != -1) {
// 'correction' de l'affichage sous chrome
document.body.style.fontSize = "Smaller";
$('#bouton_connexion').addClass('fontsize_smaller')
}
// Code JS ajouté sur toutes les pages pour bloquer la flèche retour arrière
// Testé sur Firefox = OK et Chrome = ne fonctionne pas
window.onpopstate = function (e) {
// console.log('click sur back')
history.go(1);
};
history.pushState({}, '', '');
// affichage popup CNIL
$("body")
.on('click', '#lien_cnil', function (event) {
$('#cnil').modal('show');
})
</script>
</body>
</html>
project_index.html
{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load application_extras %}
{% block extrahead %}{% endblock %}
{% block title %}Projets | Mereva{% endblock %}
{% block content %}
<div class='container'>
<br>
<br>
<h1>Projets</h1>
<br>
<br>
<br>
<table id="table_id" class="table table-stripped table-hover" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for project in projects %}
{% if project|circuit_project %}
<tr>
<td data-toggle="tooltip" data-placement="top" title="">
{{ project.pro_ide }}
</td>
<td data-toggle="tooltip" data-placement="top" title="">
{{ project.pro_nom }}
</td>
<td data-toggle="tooltip" data-placement="top" title="">
{% if user_profil == '1' %}
<a style="margin-right: 40px" data-target="" class=""
href="{% url 'project:edit_utilisateurprojet' %}?projet={{ project.pro_ide }}">Nouvel
utilisateur</a>
{% if project|utilisateur_project %}
<a style="margin-right: 40px" data-target="" class=""
href="{% url 'project:utilisateur' %}?projet={{ project.pro_ide }}">Modifier</a>
{% endif %}
{% elif user_profil == '2' %}
{% if project|project_to_validate %}
<a style="margin-right: 40px" data-target="" class=""
href="{% url 'project:utilisateur' %}?projet={{ project.pro_ide }}">Valider</a>
{% elif project|utilisateur_project %}
<a style="margin-right: 40px" data-target="" class=""
href="{% url 'project:utilisateur' %}?projet={{ project.pro_ide }}">Modifier</a>
{% endif %}
{% elif user_profil == '7' or user_profil == '6' %}
<a style="margin-right: 40px" data-target="" class=""
href="{% url 'project:edit_utilisateurprojet' %}?projet={{ project.pro_ide }}">Nouvel
utilisateur</a>
{% if project|utilisateur_project %}
<a style="margin-right: 40px" data-target="" class=""
href="{% url 'project:utilisateur' %}?projet={{ project.pro_ide }}">Modifier</a>
{% endif %}
{% endif %}
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
<br><br>
<div class="panel panel-default" style="color:red">
<div class="panel-heading">
<p>TO DO</p>
</div>
* Une fois traité par l'administrateur concerné, l'investigateur et/ou le moniteur ne devrait pas pouvoir
modifier l'application d'un choix déjà effectué : FAIT<br>
* Si l'investigateur et/ou le moniteur modifie ou supprime une application avant traitement par
l'administrateur, il faut que l'admin soit informé : FAIT<br>
</div>
</div>
</div>
{% endblock %}
{% block extrabody %}
<!--DataTable-->
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<!--DataTable-->
<!--Modal-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Modal-->
<script>
var url = ''
$(document).ready(function () {
url = window.location.href;
// http://live.datatables.net/ficemafo/1/edit
$("#table_id").one("preInit.dt", function () {
$("#table_id_filter label").append('<a data-target="" class="btn btn-success" href="{% url "project:edit_projet" %}" style="width: 190px;margin-left:10px;">Nouveau projet</a>');
});
if (window.navigator.language.slice(0, 2) == 'fr') {
var table = $('#table_id').DataTable({
lengthMenu: [5, 10],
"pageLength": 5,
"bAutoWidth": false,
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
},
"columns": [
{ "width": "10%" },
{ "width": "60%" },
{ "width": "30%" },
],
// "oSearch": {"sSearch": "Valider"}
"aoSearchCols": [ // filtre sur les lignes pour lesquelles la collone 'Actions' dispose d'un lien
null,
null,
{ "sSearch": "^[A-Z]", "bEscapeRegex": false }
]
});
// table.on('init', function () {
// table.page('last').draw(false);
// });
} else {
var table = $('#table_id').DataTable({
lengthMenu: [5, 10],
"pageLength": 5,
"bAutoWidth": false,
"columns": [
{ "width": "10%" },
{ "width": "60%" },
{ "width": "30%" },
],
"aoSearchCols": [ // filtre sur les lignes pour lesquelles la collone 'Actions' dispose d'un lien
null,
null,
{ "sSearch": "^[A-Z]", "bEscapeRegex": false }
]
});
// table.on('init', function () {
// table.page('last').draw(false);
// });
}
});
</script>
{% endblock %}
Upvotes: 0
Views: 79
Reputation: 574
yes this way it takes long to load. instead you can use datatable's serverside processing to reduce the loading times.
Upvotes: 1