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

Posted 2023-05-07

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

【英文标题】：How to dynamically change Datatables multiple column headers using ajax and jquery without refreshing the webpage?

【发布时间】：2014-03-09 09:23:11

【问题描述】：

我正在尝试根据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);
        );

下面是我的 HTML 表格：

<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>

因为在 HTML 中，我设置了 3 个标头。如果返回标头的长度为 3，则它可以正常工作。但是，如果长度发生变化，函数（可能是错误的）：

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

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

我已经卡了两天了。谁能帮帮我？

非常感谢！！！

凯蒂

【问题讨论】：

嗨，如果您在浏览器的控制台窗口中运行 setTitle('with what ever selection of header')，它是否会提供所需的输出？对我来说它的给予

@CodingAnt 您好，感谢您的回复。事实上，它给了我想要的输出。但是由于在 HTML 表格中，

的数字是固定的。我不能使用 html() 函数来简单地添加一个标题。

您好，它起作用了吗？好奇

抱歉回复晚了...请在下面查看我自己的答案。干杯！

【参考方案1】：

我通过更改在 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>";

然后，将您的表格附加到您的网页中。在这里，我将它附加到我的标签：

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

最后，我通过根据自己的数据更改 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();

顺便说一句，谢谢@CodingAnt、@JerryDDG 的帮助。

这里解决了关于更改数据表标题的相关问题：

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

【参考方案2】：

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

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

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

【参考方案3】：

这个我不太确定，其实你的要求我还不清楚。

如果它是正确的，你需要根据你的要求稍微微调。如果需要，它会添加标题。

<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>