Comment modifier dynamicment des en-têtes de colonnes multiples Datatables à l’aide de ajax et jquery sans actualiser la page Web?

J’essaie de changer le numéro de colonne et l’en-tête en fonction de la valeur renvoyée par ajax, alors que les données de la table sont mises à jour à l’aide du plugin DataTables jquery. Code Javascript et jQuery ci-dessous:

$( document ).ready(function() { $.ajax({ type:'POST', url: 'readtitle.php', //this php contains the column header success:function(re){ setTitle(re); // this function is used to set column header } }); var oTable = $('#table_id').dataTable({ "bPaginate": false, "bProcessing": true, "bLengthChange": true, "bFilter": true, "bResortingeve": true, "bInfo": false, "bAutoWidth": false, "bServerSide": true, "sDom": '<"top"iflp>rt<"bottom"iflp>', "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "sAjaxSource": './aadata.txt', "aoColumnDefs": [ {"aTargets":[]} ] }); } function setTitle(re){ re = re.subssortingng(0,re.length-1); var retitle = re.split(","); // this retitle can be of length 3 to 6, depends on the data $(retitle).each(function(index, element){ $('#titleh').html(element); }); } 

Ci-dessous, mon tableau HTML:

 
DateActual
Row 1 Data 1 Row 1 Data 2

Parce que dans le HTML, j’ai mis 3 en-tête. Si l’en-tête de retour est de longueur 3, cela fonctionne bien. Cependant, si la longueur change, la fonction (éventuellement incorrecte):

  $(retitle).each(function(index, element){ $('#titleh').html(element); }); 

renvoie uniquement le dernier élément, ce qui fixe le nombre de colonnes du tableau à 3. Je ne sais pas comment augmenter l’en-tête de colonne à l’aide d’une boucle dans jQuery.

Je ne suis pas coincé depuis deux jours. Est-ce que quelqu’un peut m’aider s’il vous plait?

Merci beaucoup!!!

Katie

J’ai résolu la question en changeant la manière d’initialiser le tableau en HTML au lieu de modifier les parameters dans Datatables.

Ce que j’ai fait est: d’abord, supprimez la table existante, ainsi que le wrapper de la table!

  $('#table_id').remove(); $('#table_id_wrapper').remove(); 

Puis initialisez une nouvelle table. et définissez le format de l’en-tête / du corps en fonction de vos données:

  var content = ""; content +=''; re = re.subssortingng(0,re.length-1); // alert(re); var retitle = re.split(","); alert (retitle + 'x'); var c = retitle.length; var atarget = []; var stitle = []; for(var i=0; i'; } content +=' '; content +='' content += "
";

Ensuite, ajoutez votre tableau à votre page Web. Ici je l’ai attaché à mon onglet:

  $('#tab3').append(content); 

Enfin, j’ai initialisé les parameters Datatable en modifiant le aoColumnDef en fonction de mes propres données. Remarque: le format de données doit correspondre à la façon dont vous définissez précédemment votre tableau HTML.

  var settings = { "bPaginate": false, "bProcessing": true, "bLengthChange": true, "bFilter": false, "bInfo": false, "bAutoWidth":false, "bServerSide": true, // "sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>', "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "sAjaxSource": './aadata.txt', "aoColumnDefs": [ { "aTargets":atarget} ] }; $('#table_id').dataTable().fnDestroy(); $('#table_id').dataTable(settings); $('#table_id').dataTable().fnReloadAjax(); 

Soit dit en passant, @CodingAnt, @JerryDDG, merci de votre aide.

Une question connexe sur la modification du titre Datatable est résolue ici:

Quel est le bon format pour changer la colonne Datatables en utilisant array?

Je ne suis pas trop sûr de cela, en fait, votre exigence n’est toujours pas claire pour moi.

Dans le cas où vous avez raison, vous devez ajuster un peu selon vos besoins. Son ajout d’en-tête si nécessaire.

  

Peut-être devriez-vous détruire l’ancienne table et en créer une nouvelle avec la nouvelle configuration.

 $(tableSelector) .dataTable(dataTable_setting) .fnAddData(data); $.ajax({ url: ... data: ... success: function(data) { if (columns number changed) { $(tableSelector).empty(); $(tableSelector) .dataTable(newDataTable_setting) .fnAddData(newData); } } })