Pagination de donnee Json avec datatable sur un modale

**mhmdsw** · 23/08/2022, 05h12

Bonjour
J ai un front avec theamleaf , a l’intérieur un modale qui affiche un tableau dont les données viennent d un backend spring chargée en ajax , donc mon problème est que j arrive a charger les données avec jquery dans le modale , mais je n'arrive pas a le paginer avec datatable , j ai essaye n solutions mais toujours rien , donc svp votre aide voici le code
Voici le code

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
<table id="idVenteJournaliereTab" width="100%"  border="1" class="table table-condensed table-striped table-hover display compact">
                    <thead>
                    <tr>
                    <th><i class="fa fa-user-md"></i> Client</th>
                    <th><i class="icon_calendar"></i> Date</th>
                    <th><i class="icon_document_alt"></i>  Produit</th>
                    <th><i class="fa fa-list-ol"></i> Quantite</th>
                    <th><i class="fa fa-money"></i>  PrixUnitaire</th>
                    <th><i class="fa fa-money"></i>  MontantTotal(TTC)</th>
                    </tr>
                    </thead>
                    <tbody id="tabVenteDaily">
 
                      <script>
                        $(document).ready(function () {
                   //-------------------------
          //-------S_AJAX
          $.ajax({
            type: 'GET',
            url: '/getAllOrder',
            dataType: 'Json',
            contentType: 'application/json',
            cache: false,
            success: function (data) {
                    var html = '';
                    var len = data.length;
                    //-------------------------------TABLE
                    for (var i = 0; i < len; i++)
                       {
                     html += '<tr>';
                     html += '<td>'+data[i].nomClient+' '+data[i].prenomClient+'</td>' ;
                     html += '<td>'+data[i].dateCommande+'</td>' ;
                     html += '<td>'+data[i].nomProduit+'</td>' ;
                     html += '<td>'+data[i].quantite+'</td>' ;
                     html += '<td>'+data[i].prixUniteVendue+'</td>' ;
                     html += '<td>'+data[i].prixSubTotal+'</td>' ;
                     html += '</tr>' ;
                        }
                    
                        //-------------------------------TABLE
                       $('#tabVenteDaily').html(html);
                       
                    //--------------------------------------------
            console.log(data);
            },
            error: function (e) {            
                //S il ya erreur , afficher , notifier erreur
                console.log("ERROR:", +e);
            }
        });//En S.ajax
        //-------S_AJAX 
     });
 
                      </script>
 
 
                   </tbody>
                    </table>

Et voici dans le footer la recupération de l 'id du tableau pour le paginer avec datatable :

Code :

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
<script>
 $('#idVenteJournaliereTab').DataTable({
  //view nb rows per page
     "pageLength":8,
      //Language
                       language: {
                           "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
                        },
                      //libelle d'element d'affichage du nombre d'element dans la base
                        "info":false,
                         //faire disparaitre le champ recherche et l'onglet afficher par page 
                        "filter":false,
                        //c'est le tri qui est sur le champ
                         "sort":false,
                        //Champ afficher element
                        "lengthChange":false
                        //Center pagination      
    });
   </script>

Donc le soucis est que la pagination ne marche pas mais j affiche tous les lignes du tableau .
Merci de votre aide

**mathieu** · 23/08/2022, 10h55

je pense qu'il faut appeler DataTable seulement quand vous avez fini de charger les données avec ajax.

regardez aussi la documentation, j'ai l'impression que vous n'avez pas besoin de construire le tableau en html :
https://www.datatables.net/manual/ajax
https://www.datatables.net/examples/ajax/index.html

**mhmdsw** · 23/08/2022, 17h27

bonjour, j'ai regardé la doc et du coup j'ai modifié ainsi :

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
<table id="idVenteJournaliereTab" width="100%"  border="1" class="table table-condensed table-striped table-hover display compact">
                    <thead>
                    <tr>
                    <th><i class="fa fa-user-md"></i> Client</th>
                    <th><i class="icon_calendar"></i> Date</th>
                    <th><i class="icon_document_alt"></i>  Produit</th>
                    <th><i class="fa fa-list-ol"></i> Quantite</th>
                    <th><i class="fa fa-money"></i>  PrixUnitaire</th>
                    <th><i class="fa fa-money"></i>  MontantTotal(TTC)</th>
                    </tr>
                    </thead>
 <script>  
     $(document).ready(function () {
    $('#idVenteJournaliereTab').DataTable({
        ajax: '/getAllOrderThisDayTestCD',
        columns: [
            { data[i]: 'nomClient' },
            { data[i]: 'dateCommande' },
            { data[i]: 'nomProduit' },
            { data[i]: 'quantite' },
            { data[i]: 'prixUniteVendue' },
            { data[i]: 'prixSubTotal' },
        ],
    });
  });
    </script>
                    </table>

Mais toujours rien, je n arrive même pas à afficher les données.