Bonjour,

Je viens vers vous car j'ai un petit problème de "timing" entre l'initialisation complète de mon tableau et l'application de DataTable.

Comme vous pouvez le voir ci-dessous, je fais une requête Ajax par <td>, or plus il y a de <td> plus la complétion du tableau est longue.

Au début je faisait un setTimeOut de 3 secondes avant d'appeler DataTable car ce délai était suffisant mais maintenant qu'il y apllus de lignes, le délai n'est pas suffisant et les dernières lignes du tableau restent incomplètes.

Tableau

<table>
  <thead>
   <tr>
      <th>Month</th>
      <th>Savings</th>
   </tr>
  </thead>
  <tbody>
   <tr>
      <td>January</td>
      <td class="toto" data-user="11">0</td>
   </tr>
   <tr>
      <td>February</td>
      <td class="toto" data-user="12">0</td>
   </tr>
  </tbody>
</table> 

JS

function addToTable(id)
{
  $.ajax({
    url: "toto.php",
    data: {id: id},
    success: function(data){
      $('.toto').html(data);
    }
  });
}

$(function({
  var t = $('.toto');
  t.each(function(k, v){
    var id = $(v).data('user');
    addToTable(id);
  });

  setTimeout(function() {
    $(table).DataTables();
  }, 3000);
}));

Pensez-vous qu'il soit possible de charger les données après l'application de DataTable ?

J'ai essayé en récupérant les id donnés par DataTables après l'application mais ça ne semble pas fonctionner.

Merci

Mecha

P.S. : Je n'ai pas mon code sous la main donc j'ai refait les exemples de tête.

-
Edité par MechaStreisand 18 avril 2018 à 10:43:16

Quelque chose comme ça peut être :

var t = $('.toto');
$.when.apply($, t.map(function(k, v) {
  var id = $(v).data('user');
  return $.ajax({
    url: "toto.php",
    data: {id: id},
    success: function(data) {
      t.html(data);
    }
  });
})).then(function() {
  $(table).DataTables();
});