javascript 如何更改数据表中标题单元格的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9412443/
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 to change the content of a header cell in dataTables?
提问by frequent
I'm using the dataTablesplugin
我正在使用dataTables插件
On my sortable columns I want to replace the column text with a button.
在我的可排序列上，我想用一个按钮替换列文本。
However doing this:
但是这样做：
$( oSettings.aoColumns[i].nTh).text();
I can retrieve the text of the respective column, BUT
我可以检索相应列的文本，但是
$( oSettings.aoColumns[i].nTh).text("some text");
$( oSettings.aoColumns[i].nTh).html("<a href='#'>some button</a>");
Does not do anything.
什么都不做。
Can somebody tell me why I can retrieve info from a cell but not edit it's content? Not necessarily a dataTables question, but maybe someone has run into something similar.
有人能告诉我为什么我可以从单元格中检索信息但不能编辑它的内容吗？不一定是 dataTables 问题，但也许有人遇到过类似的问题。
Thanks for help!
感谢帮助！
EDIT: This is the solution:
Inside your table call specify, which columns should be sortable = these get a .jqmSorterclass
编辑：这是解决方案：
在你的表调用中指定，哪些列应该是可排序的=这些得到一个.jqmSorter类
"aoColumns": [
/* Select */ {"bSortable": false },
/* Type */ {"sClass": "jqmSorter"},
/* From */ {"bSortable": false },
/* Status */ {"bSortable": false },
],
Then call the fnHeaderCallbackin which I'm replacing the header cell content with a JQM button:
然后调用fnHeaderCallback，其中我用 JQM 按钮替换标题单元格内容：
"fnHeaderCallback": function( nHead ) {
$(nHead).closest('thead').find('.jqmSorter').each( function () {
var sortTitle = $(this).text(),
sortButton =
$( document.createElement( "a" ) ).buttonMarkup({
shadow: false,
corners: false,
theme: 'a',
iconpos: "right",
icon: "ui-icon-radio-off"
})
sortButton.find('.ui-btn-text').text(sortTitle);
$(this).html( sortButton )
sortButton.addClass("colHighTrigger");
});
}
采纳答案by linuxeasy
You can do it this way:
你可以这样做：
While defining table columns(define if you not doing it already), and use the sClassattribute of the table column definition (which is in JSON).
在定义时table columns（如果您还没有这样做，请定义），并使用sClass表列定义的属性（在 JSON 中）。
After this, that class will be applied to the table column.
在此之后，该类将应用于表列。
After this, use the callbackfunction of datatables : fnRowCallback
在此之后，使用callbackdatatables的功能：fnRowCallback
and in this, set the html as
在此，将 html 设置为
$(nRow, '.your_class').html('Your HTML Values');
This will be called when each row of the table is rendered.
这将在呈现表格的每一行时调用。
If you don't want it to do on each row, you can control that with an if-condition.
如果您不希望它在每一行上执行，您可以使用 if 条件来控制它。
回答by Pierre
Use fnRenderin your aoColumnssettings, use it to return HTML code for that specific cell, drop downs, checkboxes, anything you want will work there.
使用fnRender您的aoColumns设置，使用它返回的HTML代码为特定的细胞，下拉菜单，复选框，你想将工作有什么。
"aoColumns": [
/*Col 1*/
{
"mData": "RowID",
"bSortable": false,
"sClass": "jqmSorter",
"fnRender": function(obj){
return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>"
}
},
/*Col 2*/
{
"bSortable": false,
"sClass": "jqmSorter",
"fnRender": function(obj){
return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>"
}
}
]
