ELHADEF
ELHADEF

Reputation: 106

Why empty JQuery Datable is so long to load?

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 %}

enter image description here

Upvotes: 0

Views: 79

Answers (1)

Shri Hegde
Shri Hegde

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

Related Questions