Javascript 如何动态更改dataTable jQuery插件的列标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29449056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How dynamically change column title of dataTable jQuery plugin?
提问by Vivien Pipo
I would like to change the title of a column my datatable generated by jQuery Datatable plugin
我想更改由 jQuery Datatable 插件生成的数据表的列的标题
Do you know if I can do something like this:
你知道我是否可以做这样的事情：
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")
?
?
It renders a html a first line like that:
它将 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&#233;lectionn&#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>
...
...
In a normal table the code bellow work , but for datatable rendered by jQuery plugin, it doesn't:
在普通表中，代码如下工作，但对于由 jQuery 插件呈现的数据表，它不会：
$('#example tr:eq(0) th:eq(0)').text("Text update by code");
Maybe there is a API method or another dom way?
也许有 API 方法或其他 dom 方法？
采纳答案by Vivien Pipo
I found a solution that really do it dynamically
我找到了一个真正动态执行的解决方案
$(table.column(1).header()).text('My title');
回答by Nishit Maheta
use below code . check DEMO
使用下面的代码。检查演示
if first tr with td
如果第一个 tr 与 td
$('table tr:eq(0) td:eq(0)').text("Text update by code");
if first tr with th
如果第一个 tr 与 th
$('table tr:eq(0) th:eq(0)').text("Text update by code");
when using service side process or want to do some action once data table load all data use Draw event.
当使用服务端进程或想要在数据表加载所有数据时执行某些操作时使用 Draw 事件。
Draw event- fired once the table has completed a draw
Draw 事件- 在桌子完成抽奖后触发
Example
例子
$('#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");
} );
Using callback.
drawCallbackFunction that is called every time DataTables performs a draw. check DEMO
使用回调。
drawCallback每次 DataTables 执行绘制时调用的函数。检查 演示
$('#example').dataTable( {
"drawCallback": function( settings ) {
$('#example tr:eq(0) th:eq(0)').text("Text update by code");
}
} );
check all callback options HERE
在此处检查所有回调选项
回答by Chinthaka Suren Fernando
Possible from this way :
可能从这种方式：
"columns": [{ sTitle: "Column1"},{ sTitle: "Column2"}]
