Discussion :

[devbenz]

Bonjour Tous le monde,
J'ai utilisé le datatables pour le filtrage d'un tableau par colonne, il marche nickel mais j'ai un problème au niveau du chargement de la page même qui contient datatable, lorsque je clique sur actualiser la page, il apparaît le tableau sans cases de filtrage pendant une seconde avant que je n'obtienne mon tableau avec les cases de filtres,
voici mon code.

Merci

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
{% extends '@App/base.html.twig'%}
 
        {% block javascripts %}
 
                <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
                <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
                <script type="text/javascript" src=" https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
                <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
 
 
                <script>  
 
                             $(document).ready(function() {
                                    $('#example thead tr').clone(true).appendTo( '#example thead' );
                                        $('#example thead tr:eq(1) th').each( function (i) {
                                            var title = $(this).text();
                                            $(this).html( '<input type="text" placeholder="Chercher '+title+'" />' );
                                            $( 'input', this ).on( 'keyup change', function () {
                                                if ( table.column(i).search() !== this.value ) {
                                                    table
                                                        .column(i)
                                                        .search( this.value )
                                                        .draw();
                                                }
                                            } );
                                        } );
                                        var table = $('#example').DataTable( {
                                            orderCellsTop: true,
                                            fixedHeader: true
                                        } );
                                
                                   
                                    $("#example").dataTable().fnDestroy();
                                    $(document).ready(function () {
 
                                        $('#example').DataTable({
                                            language:  {
                                            "sProcessing":     "Traitement en cours...",
                                            "sSearch":         "Rechercher&nbsp;:",
                                            "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
                                            "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                                            "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                                            "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                                            "sInfoPostFix":    "",
                                            "sLoadingRecords": "Chargement en cours...",
                                            "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
                                            "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
                                            "oPaginate": {
                                                "sFirst":      "Premier",
                                                "sPrevious":   "Pr&eacute;c&eacute;dent",
                                                "sNext":       "Suivant",
                                                "sLast":       "Dernier"
                                            },
                                            "oAria": {
                                                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                                                "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                                            }
                                        }
                                        });
                                    });
 
                               });
 
                </script>
        {% endblock %}
        {% block body %}
 
                                            <br></br>
 
                            <table id="example" class="table table-striped table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>NumeroPei</th>
                                        <th>Libelle d'intervention</th>
                                        <th>Etat</th>
                                        <th>Date début d'intervention</th>
                                        <th>Date fin d'intervention</th>
 
 
                                    </tr>
                                </thead>
 
                                    {% for pei in peis %}
 
 
                                    <tr>
                                        <td>{{pei.getNumeroPei()}} </td>
                                        <td>{{pei.libelleIntervention}}</td>
                                        <td> {{ pei.idtaxonomie.etat}} </td> 
                                        <td> {{ pei.dateDebutIntervention|date("d/m/Y") }} </td>
                                        <td> {{ pei.dateFinIntervention|date("d/m/Y") }} </td>
                                    </tr>
                                    {% endfor %}   
 
                                </table> 
                                {% endblock %}

[kevin254kl]

Salut,

Oui c'est logique car le traitement commence une fois la page html chargé.
Tu peux utiliser du cache pour accélérer le load https://github.com/asm89/twig-cache-extension,
Utilise la console google tu as une partie audit pour voir ce qui ralenti ta page.
Tu peux aussi utiliser un loader js ou html pour faire patienter.