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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : 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
//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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.