Come modificare dynamicmente i Datatables con più intestazioni di colonna utilizzando ajax e jquery senza aggiornare la pagina Web?

Sto cercando di modificare il numero di colonna e l’intestazione in base al valore restituito da ajax, mentre i dati della tabella vengono aggiornati utilizzando il plug-in jQuery di DataTables. Javascript e codice jQuery di seguito:

$( 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, "bRetrieve": 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.substring(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); }); } 

Di seguito è la mia tabella HTML:

 
DateActual
Row 1 Data 1 Row 1 Data 2

Perché in HTML, ho impostato 3 intestazione. Se l’intestazione di ritorno è di lunghezza 3, funziona correttamente. Tuttavia, se la lunghezza cambia, la funzione (probabilmente errata):

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

restituisce solo l’ultimo elemento, che fissa il numero della colonna della tabella a 3. Non so come aumentare l’intestazione della colonna usando un ciclo in jQuery.

Sono rimasto bloccato per due giorni. Qualcuno può aiutarmi?

    Grazie molto!!!

    Katie

    Ho risolto la domanda cambiando il modo di inizializzare la tabella in HTML invece di modificare le impostazioni in Datatables.

    Quello che ho fatto è: in primo luogo, rimuovere il tavolo esistente, così come il wrapper tabella!

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

    Quindi inizializza una nuova tabella. e imposta il formato dell’intestazione / corpo in base ai tuoi dati:

      var content = ""; content +=''; re = re.substring(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 += "
    ";

    Quindi, aggiungi il tuo tavolo alla tua pagina web. Qui l’ho allegato alla mia scheda:

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

    Infine, ho inizializzato le impostazioni Datatable modificando aoColumnDef in base ai miei dati. Si noti che il formato dei dati deve corrispondere al modo in cui è stata definita la tabella HTML in precedenza

      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(); 

    A proposito, grazie @CodingAnt, @JerryDDG lo stesso per il tuo aiuto.

    Una domanda correlata sulla modifica del titolo Datatable viene risolta qui:

    Qual è il formato corretto per modificare la colonna Datatables usando l’array?

    Non ne sono troppo sicuro, in realtà il tuo requisito non è ancora chiaro per me.

    Nel caso sia giusto, è necessario sintonizzarsi un po ‘in base alle proprie esigenze. La sua aggiunta di intestazione, se necessario.

      

    Forse dovresti distruggere il vecchio tavolo e crearne uno nuovo con la nuova configurazione.

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