Discussion :

[lnquaidorsay]

Bonjour,

J 'utilise datatable 1.10.16 et je veux modifier le message par défaut quand les données proviennent du backend.

Actuellement, avant que les données du backend s'affiche, datatable affiche le message suivant "Aucune donnée disponible dans le tableau"

et moi je veux changer ce message par défaut par "Chargement des donnée en cours, veuillez patienter ... ou par un loader qui disparaît une fois les données côté backend sont arrivées côté frontend.

Comment puis je le faire, voici mon code modifié

Code HTML :

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
<script>
    var timeoutId;
    var datatable_etudiants;
   $(document).ready( function () {
        init_datatables();
                update_students();
        });
</script>
 
<div id="collapseetudiants">
        <div class="row" style="margin:0;">
            <div class="table-responsive">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <table id="datatable_etudiants" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Prenom</th>
                                <th>Adresse</th>
                                <th>ville</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <span class="text-right col-lg-12 col-md-12 col-sm-12 col-xs-12">Retour en haut</span>
                </div>
            </div>
        </div>
 </div>
 <script>
    function init_datatables() {
       datatable_etudiants = $('#datatable_etudiants').DataTable({
        searching: false,
        responsive: true,
        processing: true,
        paging: false,
        columnDefs: [
            { "width": "20%", "targets": 0 },
            { "width": "15%", "targets": 1 },
            { "width": "30%", "targets": 2 },
            { "width": "40%", "targets": 3 }
        ],
        language: {
            url: "/cdn/js/datatables/1.10.16/french.json",
            emptyTable : "Chargement des donnée en cours, veuillez patienter ..."
        }
        });
        new $.fn.dataTable.FixedHeader(datatable_etudiants);
   }
 
        function update_students(){
          
            $.get("myActionController1",{},function(data){
                datatable_etudiants.clear();
                $.each(data.students,function(i,student){
                       $.when($.get("myActionController2/" + student.idStudent,{},function(d){
                          (data.students[i]).news = d;
                       })).done(function(){
                             add_row_students(datatable_suspicions, data.students[i]);
                     });
               });
          });
        
        }
        
        function add_row_students(e, data) {
               e.row.add( [
                      data.nom,
                      data.prenom,
                      data.adr,
                      data.news
                ] ).draw();
      }
</script>

[ProgElecT]

Salut

Il y a plusieurs erreurs de balises, lignes 8 et ligne 75, à moins que cela ne soit qu'un mauvais copier/coller.

[lnquaidorsay]

oui c'est un mauvais copier coller mais le problème reste le même

[Invité]

Bonjour,

1- un "copier-coller" reproduit fidèlement le code...
Corrige les erreurs.

2- A corriger aussi :

Code :

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

    columnDefs: [ // double quotes en trop (https://datatables.net/reference/option/columnDefs)

Code :

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

      loadingRecords: "my personal info2", // manque la virgule

Code :

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

1
2
3
  $.get("myActionController1", {}, function(data) {
...
  }); // manque la parenthèse fermante

Améliore l'indentation du code.
Ce sera plus facile à corriger.

[Toufik83]

Salut,

Voilà à quoi ressemble le fichier de langue i18n dans la documentation de DataTable, mais toi tu utilises un autre fichier que tu dois télécharger d'abord et l'enregistrer (avec l’extension .json) dans un dossier de ton site, après tu modifies le message de l'item "sEmptyTable" et pour finir tu met son chemin dans l'option url de language.

Code :

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

1
2
3
4
 
language: {
            url: "chemin_fichier_langue"
}

Pour mieux t'expliquer, Je viens de faire un exemple simple en ligne où je stocke le fichier langue dans une variable langueFr (que tu peux télécharger via le lien en bas...) et j'ai fais exprès de commenter (vider) le data de la variable json pour voir le message perso quand la table est vide.

[lnquaidorsay]

Bonjour à tous,

j'ai corrigé mon code (dans mon 1er message) et éclairci ma question. Merci déjà pour vos premiers retours.

du coup dans mon contexte expliqué ci-haut, comment dois-je m'y prendre pour mon problème.

[Invité]

Bonjour,

Toufik83 t'a mis un lien.
As-tu cliqué dessus ?

[Invité]

Bonjour,

je pense avoir mis la main sur ce qui t’intéresse : initComplete (voir les exemples)

Comment ?

• Avec une simple recherche "DataTable complete" (le plus "difficile" est de trouver les bons mots-clé)
• En lisant la DOC -> Options

[lnquaidorsay]

Super , j'ai trouvé mon bonheur en mixant les deux dernières réponses(celle de Toufik83 et de jreaux62).
merci encore la famille.