Chargement de la page datatables

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