katie lu katie lu - 6 months ago 366
Javascript Question

How to dynamically change Datatables multiple column headers using ajax and jquery without refreshing the webpage?

I am trying to change the column number and header according to the return value of ajax, while the table data is updated using DataTables jquery plugin. Javascript and jQuery Code below:

$( 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<"clear">>rt<"bottom"iflp<"clear">>',
"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);
});
}


Below is my HTML-table:

<table id="table_id" class="display">
<thead>
<tr id="titler"><th>Date</th><th>Actual</th>
<th id="titleh"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>

</tbody>
</table>


Because in the HTML, I set 3 header. If the return header is of length 3, it works fine. However, if the length changes, the function (possibly wrong):

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


only returns the last element, which makes the table column number fixed to 3. I don't know how to increase the column header using a loop in jQuery.

I haven been stuck for two days. Can anyone please help me?

Many thanks!!!

Katie

Answer

I solved the question by changing the way of initialising table in HTML instead of altering the settings in Datatables.

What I did is: first, remove the existing table, as well as the table wrapper!

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

Then initialise a new table. and set the format of header/body according to your data:

 var content = "<table id='table_id' class='display datatable' style='width:100%;'><thead>";
 content +='<tr>';


 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<c; i++){
     atarget[i] = i;
     stitle[i] = retitle[i];
     content += '<td>' +retitle[i]  + '</td>';

   }

  content +=' </tr></thead>';
  content +='<tbody></tbody>'
  content += "</table>";

Then, append your table to your webpage. Here I attached it to my tab:

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

Finally, I initialised the Datatable settings by changing the aoColumnDef according to my own data. Noted that the data format must match the way you previously define your HTML table

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

By the way, thank you @CodingAnt, @JerryDDG all the same for your help.

A related question about changing the Datatable title is solved here:

What is the right format to change Datatables column using array?

Comments