如何动态更改dataTable jQuery插件的列标题？

Question

我想要修改由jQuery Datatable插件生成的datatable中的某一列标题。

您知道我是否可以像这样做：

 table = $('#example').DataTable({
        "data": source_dataTable,
        "columnDefs": defs,

    "dom": 't<"top"f>rt<"bottom"lpi><"clear">',
});
// WHAT I WANT TO DO:
    table.column(0).title.text("new title for the column 0")

它会将HTML的第一行呈现为：

 <table id="example" class="row-border hover dataTable no-footer" role="grid" aria-describedby="example_info" style="width: 1140px;">
   <thead>
       <tr role="row">
              <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="S&amp;#233;lectionn&amp;#233;: activer pour trier la colonne par ordre croissant" style="width: 94px;">Sélectionné</th>

               <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Anglais : activer pour 

                  trier la colonne par ordre croissant" style="width: 

62px;">Anglais </th>

</tr>
</thead>
 </table>

在普通表格中，下面的代码可以正常工作，但对于由jQuery插件渲染的datatable，它不起作用：

$('#example tr:eq(0) th:eq(0)').text("Text update by code");

也许有一个API方法或者其他的DOM方式吗？

- Pipo

---

示例应为英语，而不是法语。 - Cœur

Answer 1

我找到了一个真正可以动态实现它的解决方案

$(table.column(1).header()).text('My title');

- Pipo

---

必须在使用之前声明表格：table = $（'#x1'）.DataTable（）; - udorb b

Answer 2

使用下面的代码。检查演示

如果第一个tr有td

  $('table tr:eq(0) td:eq(0)').text("Text update by code");

如果第一个 tr 有 th

  $('table tr:eq(0) th:eq(0)').text("Text update by code");

当使用服务端处理或想要在数据表加载所有数据后执行某些操作时，请使用绘制事件。 绘制事件 - 在表格完成绘制后触发

示例

 $('#example').dataTable();

 $('#example').on( 'draw.dt', function () {
   console.log( 'Redraw occurred at: '+new Date().getTime() );
   $('#example tr:eq(0) th:eq(0)').text("Text update by code");
 } );

使用回调函数。
drawCallback 是每次 DataTables 执行绘制时调用的函数。查看 DEMO。

   $('#example').dataTable( {
    "drawCallback": function( settings ) {
      $('#example tr:eq(0) th:eq(0)').text("Text update by code");
    }
  } );

检查所有回调选项 这里

- Nishit Maheta

---

谢谢，我相信它应该适用于经典表格，但对于使用jQuery数据表生成的表格却不行。 - Pipo

它也可以与数据表一起使用。使用您用于Datatable的表ID添加代码..您能展示我的代码吗？ - Nishit Maheta

我编辑了问题，我尝试使用 $('table#example tr:eq(0) th:eq(0)').text("Text update by code"); 但是没有起作用。 - Pipo

谢谢，是的，如果我直接编写渲染的HTML，则您的示例可以正常工作。但是我不知道为什么，使用jQuery datatable插件呈现的datatable无法正常工作（即使生成的HTML相同），可能是由于插件阻止了它，因为这是触发排序的地方，我不知道。感谢您的帮助。 - Pipo

不，你可以在数据表加载后编写此代码。有一个函数在数据表加载数据后调用。我会使用数据表插件创建一个示例...明天。 - Nishit Maheta

Answer 3

可能从这个方面来看：

"columns": [{ sTitle: "Column1"},{ sTitle: "Column2"}]

- Chinthaka Suren Fernando

Answer 4

var SelectedTable = $('# [Table ID]').DataTable();
var HeaderText = SelectedTable.columns([col index]).header();
$(HeaderText).html('[new col name]');

- Moory Pc

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P