如何使用ajax和jquery动态更改Datatables多个列标题而不刷新网页？ [英] How to dynamically change Datatables multiple column headers using ajax and jquery without refreshing the webpage?
问题描述
我正在根据ajax的返回值更改列号和标题，而使用DataTables jquery插件更新表数据。 Javascript和jQuery代码如下：
$（document）.ready（function（）{
$ .ajax（{
type：'POST'，
url：'readtitle.php'，//这个php包含列标题
success：function（re）{
setTitle （re）; //此函数用于设置列标题
}
}）;
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><bottomiflp<clear>>'，
aLengthMenu：[[10,25,50，-1]，[10， 50，All]]，
sAjaxSource：'./aadata.txt'，
aoColumnDefs：[
{aTargets：[]}
]
}）;
}
fu nct setTitle（re）{
re = re.substring（0，re.length-1）;
var retitle = re.split（，）; //这个retitle可以长度为3到6，取决于数据
$（retitle）.each（function（index，element）{
$（'＃titleh'）） html（element）;
}）;
}
以下是我的HTML表：
< table id =table_idclass =display>
< thead>
< tr id =titler>< th>日期< / th>< th>实际< / th>
< th id =titleh>< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>行1数据1< / td>
< td>行1数据2< / td>
< / tr>
< / tbody>
< / table>
因为在HTML中，我设置了3个标题。如果返回标题长度为3，则可以正常工作。然而，如果长度变化，函数（可能是错误的）：
$（retitle）.each（function（index，element ）{
$（'＃titleh'）。html（element）;
}）;
只返回最后一个元素，这使得表列号固定为3.我不知道如何使用jQuery中的循环增加列标题。
我已经停了两天。任何人都可以帮助我吗？
非常感谢!!!
凯蒂
我通过改变HTML中初始化表的方式来解决问题，而不是更改Datatables中的设置。
我所做的是：首先删除现有表格以及表格包装器
$（'＃ table_id'）。remove（）;
$（'＃table_id_wrapper'）。remove（）;
然后初始化一个新表。并根据您的数据设置标题/正文的格式：
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 = []; （var i = 0; i
stitle [i] = retitle [i];
content + ='< td>'+ retitle [i] +'< / td>';
}
content + ='< / tr>< / thead>';
content + ='< tbody>< / tbody>'
content + =< / table>;
然后，将表添加到您的网页。这里我把它附加到我的标签：
$（'＃tab3'）。append（content）
最后，我通过根据我自己的数据更改aoColumnDef来初始化Datatable设置。注意到数据格式必须符合您之前定义HTML表格的方式。
var settings = {
bPaginate：false，
bProcessing：true，
bLengthChange：true，
bFilter：false，
bInfo：false，
bAutoWidth：false，
bServerSide：true，
//sDom：'<topiflp<clear>>><bottomiflp&清除>，
aLengthMenu：[[10，25，50，-1]，[10，25，50，全部]]，
sAjaxSource ./aadata.txt'，
aoColumnDefs：[
{aTargets：atarget}
]
};
$（'＃table_id'）。dataTable（）。fnDestroy（）;
$（'＃table_id'）。dataTable（settings）;
$（'＃table_id'）。dataTable（）。fnReloadAjax（）;
顺便说一下，谢谢@CodingAnt，@JerryDDG都是一样的帮助。 >
有关更改Datatable标题的相关问题在此解决：
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
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?
这篇关于如何使用ajax和jquery动态更改Datatables多个列标题而不刷新网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
