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?