如何在不刷新网页的情况下使用ajax和jquery动态更改Datatables的多个列标题？

我试图根据ajax的返回值更改列号和标题，同时使用DataTables jquery插件更新表数据。Javascript和jQuery代码如下：

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

仅返回最后一个元素，该元素使表列号固定为3。我不知道如何在jQuery中使用循环来增加列标题

我已经被困两天了。有人能帮我吗

非常感谢

---

凯蒂

我对此不太确定，实际上你的要求我还不清楚

如果是正确的，您需要根据您的要求进行微调。如果需要，可以添加标题

<script type="text/javascript">

function setTitle(re){

    re = re.substring(0,re.length-1);

    var retitle = re.split(",");  

    //destroy element created  on request
    $('th').each(function(index, element)
    {

          if(index > 2)
          {
            $( this ).remove();
          }

    });


    //For extra header if any

    if(retitle.length > 1)
    {
        for (var i = 1; i <= retitle.length; i++) 
        {
            $('#titler').append('<th></th>');
        };

    }

    var counter     =   0;

    $('th').each(function(index, element)
    {

          if(index > 1)
          {
            $( this ).text(retitle[counter]);
            counter ++;
          }

    });

}


</script>

函数集标题（re）{
re=re.子串（0，re.长度-1）；
var retitle=重新拆分（“，”）；
//销毁根据请求创建的元素
$（'th'）。每个（函数（索引，元素）
{
如果（索引>2）
{
$（this.remove（）；
}
});
//如有额外标题，请参阅
如果（重定时长度>1）
{
对于（变量i=1；i 1）
{
$（this）.text（retitle[counter]）；
计数器++；
}
});
}

我对此不太确定，实际上我还不清楚您的要求

如果是正确的，您需要根据您的要求进行微调。如果需要，可以添加标题

<script type="text/javascript">

function setTitle(re){

    re = re.substring(0,re.length-1);

    var retitle = re.split(",");  

    //destroy element created  on request
    $('th').each(function(index, element)
    {

          if(index > 2)
          {
            $( this ).remove();
          }

    });


    //For extra header if any

    if(retitle.length > 1)
    {
        for (var i = 1; i <= retitle.length; i++) 
        {
            $('#titler').append('<th></th>');
        };

    }

    var counter     =   0;

    $('th').each(function(index, element)
    {

          if(index > 1)
          {
            $( this ).text(retitle[counter]);
            counter ++;
          }

    });

}


</script>

函数集标题（re）{
re=re.子串（0，re.长度-1）；
var retitle=重新拆分（“，”）；
//销毁根据请求创建的元素
$（'th'）。每个（函数（索引，元素）
{
如果（索引>2）
{
$（this.remove（）；
}
});
//如有额外标题，请参阅
如果（重定时长度>1）
{
对于（变量i=1；i 1）
{
$（this）.text（retitle[counter]）；
计数器++；
}
});
}

也许您应该销毁旧表，并使用新配置创建一个新表

$(tableSelector)
    .dataTable(dataTable_setting)
    .fnAddData(data);

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

---

也许您应该销毁旧表并使用新配置创建一个新表

$(tableSelector)
    .dataTable(dataTable_setting)
    .fnAddData(data);

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

---

我通过改变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 = [];
   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>";

最后，我通过根据自己的数据更改aoColumnDef来初始化Datatable设置。注意，数据格式必须与之前定义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();

var设置={
“bPaginate”：错误，
“bProcessing”：正确，
“bLengthChange”：正确，
“bFilter”：错误，
“bInfo”：假，
“bAutoWidth”：假，
“bServerSide”：正确，
//“sDom”：“rt”，
“阿伦提努”：[[10,25,50，-1]，[10,25,50，“全部”]，
“sAjaxSource”：“./aadata.txt”，
“aoColumnDefs”：[
{“目标”：目标}
]
};
$（'#table_id'）.dataTable（）.fnDestroy（）；
$（'#table_id'）。数据表（设置）；
$（'#table_id'）.dataTable（）.fnReloadAjax（）；

顺便说一句，谢谢你的帮助

此处解决了有关更改数据表标题的相关问题：

---

我通过改变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 = [];
   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>";

最后，我通过根据自己的数据更改aoColumnDef来初始化Datatable设置。注意，数据格式必须与之前定义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();

var设置={
“bPaginate”：错误，
“bProcessing”：正确，
“bLengthChange”：正确，
“bFilter”：错误，
“bInfo”：假，
“bAutoWidth”：假，
“bServerSide”：正确，
//“sDom”：“rt”，
“阿伦提努”：[[10,25,50，-1]，[10,25,50，“全部”]，
“sAjaxSource”：“./aadata.txt”，
“aoColumnDefs”：[
{“目标”：目标}
]
};
$（'#table_id'）.dataTable（）.fnDestroy（）；
$（'#table_id'）。数据表（设置）；
$（'#table_id'）.dataTable（）.fnReloadAjax（）；

顺便说一句，谢谢你的帮助

此处解决了有关更改数据表标题的相关问题：

---

您好，如果您在浏览器的控制台窗口中运行setTitle（“使用任何标题选项”），它是否会提供所需的输出？对我来说是giving@CodingAnt嗨，谢谢你的回复。事实上，它给了我想要的输出。但是因为在HTML表中，数字是固定的。我不能使用html（）函数简单地向其中添加一个标题。嗨，它起作用了吗？？很抱歉回复太晚了。。。请看下面我自己的答案。干杯您好，如果您在浏览器的控制台窗口中运行setTitle（“使用任何标题选项”），它是否会提供所需的输出？对我来说是giving@CodingAnt嗨，谢谢你的回复。事实上，它给了我想要的输出。但是因为在HTML表中，数字是固定的。我不能使用html（）函数简单地向其中添加一个标题。嗨，它起作用了吗？？很抱歉回复太晚了。。。请看下面我自己的答案。干杯