en utilisant jquery datatable pour les lignes de table dynamiques

Question

Je construis la table dynamiquement en utilisant jquery/javascript. J'ai plusieurs liens sur lesquels le corps de la table sera généré dynamiquement en utilisant json/jquery. J'aime intégrer la datable jquery à la table créée dynamiquement. Comment puis-je attacher le .dataTable() pour les lignes créées dynamiquement.

Lorsque j'ai essayé d'utiliser dans document.ready, la table contient les valeurs de la première table créée.

Mes javascript ressemblent:

function GetProducts(Id) { 
     $('#tProductListBody').html(''); 

     $.getJSON("/Product/GetProducts/?t=" + new Date(), { catId: Id }, 
     function(data) { 
      var _productsBodyHtml = ''; 
      if (data != null && data != false) { 
      for (i in data) { 
       var _product = data[i]; 
       _productsBodyHtml += '<tr><td>' + _product.ProductName + '</td>'; 
       _productsBodyHtml += '<td>' + _product.QuantityInHand + '</td><td>' + _product.Price + '</td></tr>'; 
      } 
      } 
      $('#tProductListBody').html(_productsBodyHtml); 
      $('#tProductList').dataTable(); 
     }); 
    } 

Avec la fonction js ci-dessus, il va ajouter datatable pour chaque clic des liens.

dataTable() est un plugin jquery qui donne des fonctionnalités de tri, de pagination et de recherche à la table html. Le plugin ajoute dynamiquement une zone de texte pour la recherche et un pager pour la pagination. Le problème auquel je suis confronté est quand je clique sur un des liens, je construis la table dynamiquement et le dataTable() additionne encore une autre zone de texte et pagineur et donne le résultat créé précédent dans la recherche et la pagination. Je dois éviter cela aussi la fonctionnalité dataTable() devrait fonctionner pour le dernier contenu de table dynamique

Comment puis-je reformuler cette fonction js pour que le datatable ne soit pas ajouté plus d'une fois et qui applique la dernière table dynamique?

Answer 1

Jetez un oeil à la fonction fnReloadAjax personnalisée du plugin datatables ...