Pagination de donnee Json avec datatable sur un modale
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:
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:
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
