Remplir une dataTable jquery avec une BDD

Version imprimable

Bonjour,

j'ai un problème avec le DataTable de jquery...

J'ai un formulaire qui permet d'ajouter un Lot de serie et sur cette même page j'ai un tableaux récapitulatif des lots ajouté en BDD.

Voici mon code pour le tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
<table id="tableauDesLots" class="background-color-lots table table-striped table-bordered" style="width:100%">
          <thead>
            <tr>
              <th>N° Lot</th>
              <th>Date</th>
              <th>Article</th>
            </tr>
          </thead>
          <tbody id="traca_tab_lot">
          </tbody>
        </table>

et voici le code qui permet d'afficher les données de la base dans le tableaux suivant un choix d'atelier :

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
//LISTE DEROULANTE ARTICLE SUIVANT ATELIER
      $('#choix_atelier').change(function(){        
        var atelier= $('#choix_atelier').val();
        document.getElementById("atelier_id").value=atelier;
        console.log(atelier);
        $.ajax({
          url: 'api.php/records/traca_log_art_atelier/',
          type: 'GET',
          data: {filter:"traca_log_atelier_id,eq,"+atelier,
                join:'traca_log_art'},
          dataType: 'json',
          success:function(response){
            console.log(response['records']);
            $("#choix_article").empty();
            $("#choix_article").append('<option value="0" selected="selected">Choix Article</option>');
            $.each(response['records'], function(i, c){
              var id = response['records'][i]['id'];
              var code = response['records'][i]['traca_log_article_id']['code_art'];
              $('#choix_article').append("<option value='"+id+"'>"+code+"</option>");
            });
          }
        });
        //REMPLISSAGE DU TABLEAU SUIVANT ATELIER
        $.ajax(
        {
          url: 'api.php/records/traca_log_lot/',
          type: 'GET',
          data: {filter:"traca_log_atelier_id,eq,"+atelier,
                join:'traca_log_art'},
          dataType: 'json',
          success:function(response){
            console.log(response['records']);
            $('#traca_tab_lot').empty();
            $.each(response['records'], function(i, c){
              var num_lot = response['records'][i]['code']; // retourne code du lot
              var date_lot = response['records'][i]['date'];// retourne la date de création du lot
              var code_art = response['records'][i]['traca_log_art_id']['code_art'];//retourne le code de l'article sélectionné
              $('#traca_tab_lot').append("<tr><td>" + num_lot + "</td><td>" + date_lot + "</td><td>" + code_art + "</td></tr>");
            });
          }
        });
      });

ça marche presque correctement le problème c'est que ce que j'affiche n'est pas incorporer dans le dataTable (impossible d'effectuer une recherche ou d'afficher seulement 10 enregistrements...)

J'ai regarder sur internet et je vois qu'il faut instancier avec :

Code:

1
2
3
$(document).ready( function () {
    $('#tableauDesLots').DataTable();
} );

le problème c'est que dans mon cas lors du chargement de la page rien ne sera afficher, l'affichage se fera sur un .change d'une liste déroulante...

J'espère avoir été assez clair,
Merci d'avance.

30/10/2019, 23h46
Toufik83

Salut,

Citation:

le problème c'est que ce que j'affiche n'est pas incorporer dans le dataTable (impossible d'effectuer une recherche ou d'afficher seulement 10 enregistrements...)

Ce n'est pas comme ça qu'on alimente une DataTable, Je tiens de t'informer qu'elle existe la fonction draw() qui permet de réactualiser le tableau en question et aussi le paramètre ajax qui permet d'alimenter le tableau avec les données d'une requête ajax.

D'après ce que je comprends, tu ne veux pas que le tableau soit affiché au chargement de la page mais seulement après avoir effectuer une recherche depuis la liste déroulante, c'est ça?

Le plus simple c'est d'ajouter un display:none au style du tableau

Code:

<table id="tableauDesLots" class="background-color-lots table table-striped table-bordered" style="width:100;display:none">

puis le ré-afficher lors d'une recherche depuis la liste déroulante.

bonjour, merci pour votre réponse, je savais que ce n'étais pas la bonne méthode pour remplir la dataTable c'est pour cela que je me suis tourner vers ici,

j'ai réglé un problème concernant le remplissage j'ai fais comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  $('#choix_atelier').change(function(){
        var atelier= $('#choix_atelier').val();
        document.getElementById("atelier_id").value=atelier;
        console.log(atelier);
        $.ajax({
          url: 'api.php/records/traca_log_art_atelier',
          type: 'GET',
          data: {filter:"traca_log_atelier_id,eq,"+atelier,
                join:'traca_log_art'},
          dataType: 'json',
          success:function(response){
            console.log(response['records']);
            $("#choix_article").empty();
            $("#choix_article").append('<option value="0">Choix Article</option>');
            $.each(response['records'], function(i, c){
              var id = response['records'][i]['id'];
              var code = response['records'][i]['traca_log_article_id']['code_art'];
              $('#choix_article').append("<option value='"+id+"'>"+code+"</option>");
            });
          }
        });
        RefreshTableau();
      });

avec comme fonction Refresh :

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
function RefreshTableau(){
      var atelier = $('#choix_atelier').val();
      $.ajax(
      {
        url: 'api.php/records/traca_log_lot',
        type: 'GET',
        data: {filter:"traca_log_atelier_id,eq,"+ atelier,
              join:'traca_log_art'},
        dataType: 'json',
        success:function(response){
          console.log(response);
          var obj =response['records'];
          $('#tableauDesLots').dataTable({
            language:{
              processing:     "Traitement en cours...",
              search:         "Rechercher :",
              lengthMenu:    "Afficher _MENU_ éléments",
              info:           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
              infoEmpty:      "Affichage de l'élement 0 à 0 sur 0 éléments",
              infoFiltered:   "(filtré de _MAX_ éléments au total)",
              infoPostFix:    "",
              loadingRecords: "Chargement en cours...",
              zeroRecords:    "Aucun élément à afficher",
              emptyTable:     "Aucune donnée disponible dans le tableau",
              paginate: {
                  first:      "Premier",
                  previous:   "Précédent",
                  next:       "Suivant",
                  last:       "Dernier"
              },
              aria: {
                sortAscending:  ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
              }
            },
            destroy: true,
            scrollY: '50vh',
            scrollCollapse: true,
            "paging" : false,
            "data" :obj,
            "columns" : [
                { "data" : "code" },
                { "data" : "date" },
                { "data" : "traca_log_art_id.code_art"}
            ]
          });
        }
      });
    };

Ce que j'aimerais faire maintenant c'est réussir à garder en mémoire les sélection qui ont été faites dans les listes déroulantes qui sont liées entres elles (unité de production -> atelier) afin que quand je rajoute un lot (redirection vers traitement.php qui redirige vers ma page avec le formulaire) le tableaux s'affiche automatiquement, actuellement il faut retourner dans les listes déroulantes puis re-sélectionner les 2 valeurs pour voir le tableaux. Je ne sais pas si je suis suffisamment clair c'est assez difficile à expliquer..

31/10/2019, 14h47
Sarz29
Ce que j'ai essayé de faire c'est de récupérer l'id de chacune de mes deux listes déroulantes et de faire ceci :
Code:

1 2 3 4 5 $(document).ready(function() { $("#choix_up").val("<?php echo $up_id; ?>"); $("#choix_atelier").val("<?php echo $atelier_id; ?>"); });
mais rien ne se passe, pourtant lorsque je fais un var_dump($_SESSION) je retrouve bien les bons ID à chaque fois.