Icônes d'en-tête dupliquées dans les tables de données lors de la mise à jour de la table

Question

Utilisation des données jquery pour afficher les données provenant de jsonresponse. L'affichage initial de la table est ok, mais quand j'actualisez et utiliser

$('#search-notable-authors').DataTable().destroy(); 
$('#search-notable-authors').DataTable(

il la table, mais recharge les doublons des icônes en-tête le nombre de fois j'ai frappé le bouton de rafraîchissement.

Voici le code complet jq

<script type="text/javascript"> 
    var $jquery_1_11_3 = jQuery.noConflict(true); 
    (function ($) { 
     $(document).ready(function() { 
      $("#refresh-btn").on("click",function(){ 
       showItemsTable1(); 
      }); 
      ajaxPaths = { 
       allNotableAuthors: "{{ path('json_getAllNotableAuthors') }}", 
       allNotableAuthorsByJournal: "{{ path('json_getAllNotableAuthorsByJournal') }}" 
      }, 
        itemsTable = null, 
        getItems = function() { 

         return $.Deferred(function() { 
          var that = this; 
          $.ajax({ 
           type: "POST", 
           data: $('#articlesList').serialize(), 
           url: ajaxPaths.allNotableAuthors, 
           success: function (data) { 
            console.log(data); 
            that.resolve(data); 
           } 
          }); 
         }); 
        }, 
        getItems1 = function() { 
         return $.Deferred(function() { 
          var that = this; 
          var journal = $("#search_authors_name_short").val(); 
          $.ajax({ 
           type: "POST", 
           data: { term : journal }, 
           url: ajaxPaths.allNotableAuthorsByJournal, 
           success: function (data) { 
            console.log(data); 
            that.resolve(data); 
           } 
          }); 
         }); 
        }, 
        showItemsTable = function() { 
         return $.Deferred(function() { 
          var that = this; 
          getItems().done(function (itemsData) { 
           $('#search-notable-authors').DataTable({ 
            aLengthMenu: [ 
             [25, 50, 100, 200, -1], 
             [25, 50, 100, 200, "All"] 
            ], 
            iDisplayLength: -1, 
            data: itemsData, 
            columns: [ 
             {"data": 0}, 
             {"data": 1}, 
             {"data": 2}, 
             {"data": 3}, 
             {"data": 4} 
            ] 
           }); 
           that.resolve(); 

          }); 
         }); 
        }, 
      showItemsTable1 = function() { 
       return $.Deferred(function() { 
        var that = this; 
        getItems1().done(function (itemsData) { 
         $('#search-notable-authors').DataTable().destroy(); 
         $('#search-notable-authors').DataTable({ 
          aLengthMenu: [ 
           [25, 50, 100, 200, -1], 
           [25, 50, 100, 200, "All"] 
          ], 
          iDisplayLength: -1, 
          data: itemsData, 
          columns: [ 
           {"data": 0}, 
           {"data": 1}, 
           {"data": 2}, 
           {"data": 3}, 
           {"data": 4} 
          ] 
         }); 
         that.resolve(); 
        }); 
       }); 
      } 
      showItemsTable(); 
     });//end of doc ready 
    })($jquery_1_11_3); 
</script> 

Comment puis-je résoudre ce problème à travailler sans dupliquer les icônes d'en-tête?

Answer 1

Je n'ai pas trouvé ce qui causait le problème, donc je ne l'ai pas résolu, mais j'ai trouvé une solution pour le contourner. Donc c'est avec ce que je vais jusqu'à ce que je trouve quelque chose de mieux.

Au début du script que j'obtenir le code HTML en-tête de table comme ceci:

var hdr = $('#search-notable-authors').find('thead').html(); 

Puis, en showItemsTable je détruis et vider la table

var tableId = $('#search-notable-authors'); 
itemsTable = $(tableId).DataTable(); 
itemsTable.destroy(); 
$(tableId).empty(); 

puis remplacer html avec thead du tableau

$('#search-notable-authors').find('thead').html(hdr); 

Voici le code complet showItemsTable:

showItemsTable = function() { 
       return $.Deferred(function() { 
        var that = this; 
        getItems().done(function (itemsData) { 
         var tableId = $('#search-notable-authors'); 
         var header = $(tableId).find('thead').html(); 
         itemsTable = $(tableId).DataTable(); 
         itemsTable.destroy(); 
         $(tableId).empty(); 

         itemsTable = $(tableId).DataTable({ 

          aLengthMenu: [ 
           [25, 50, 100, 200, -1], 
           [25, 50, 100, 200, "All"] 
          ], 
          iDisplayLength: -1, 
          data: itemsData, 
          columns : [ 
           DataTables.expandCol, 
           {"data": 'id'}, 
           {"data": 'email'}, 
           {"data": 'journal'}, 
           {"data": 'title'}, 
           {"data": 'citation_link'} 
          ] 
         }); 
         $('#search-notable-authors').find('thead').html(hdr); 
         that.resolve(); 
        }); 
       }); 
      }, 

Si quelqu'un arrive avec une meilleure solution, ou solution de problème d'origine s'il vous plaît écrivez