如何将类添加到 jquery 数据表中的新行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3214039/
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 add a class to a new row in a jquery datatables?
提问by Pierluc
How can I add a class to the row I'm adding in the datatable?
如何将一个类添加到我在数据表中添加的行？
If not possible, how can I use fnRowCallbackor fnDrawCallbackto change the class?
如果不可能，我如何使用fnRowCallback或fnDrawCallback更改课程？
oTable = $('#example').dataTable( {
"bJQueryUI": true,
"bSortClasses": false,
"sDom":'T<"clear">',
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var oSettings = oTable.fnSettings();
oSettings.aoData[iDisplayIndex].nTr.className = "gradeX odd";
}
});
The above code is giving me an error.
上面的代码给了我一个错误。
this is how I add the row:
这就是我添加行的方式：
oTable.fnAddData(arr);
回答by Johnny Oshika
Try changing your fnRowCallbackto the following:
尝试将您fnRowCallback的更改为以下内容：
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.className = "gradeX odd";
return nRow;
}
You can refer to the offical documentationto further understanding this callback function.
你可以参考官方文档进一步了解这个回调函数。
回答by user1191811
You can add the classname in your data itself as described in the documentation.
您可以按照文档中的说明在数据本身中添加类名。
http://www.datatables.net/examples/server_side/ids.html
http://www.datatables.net/examples/server_side/ids.html
use DT_RowIdfor adding id for any row
use DT_RowClassfor adding class for any row
use DT_RowDatafor adding html5 data object to any row
使用DT_RowId用于添加ID为任何行
使用DT_RowClass用于添加类的任何行
使用DT_RowData用于添加HTML5数据反对任何行
eg:
例如：
"data": [
{
"DT_RowId": "row_5",
"first_name": "Airi",
"last_name": "Satou",
"position": "Accountant",
"office": "Tokyo",
"start_date": "28th Nov 08",
"salary": "$162,700"
}]
"data": [ {
"DT_RowId": "row_5",
"first_name": "Airi",
"last_name": "Satou",
"position": "Accountant",
"office": "Tokyo",
"start_date": “08 年 11 月 28 日”，
“薪水”：“$162,700”
}]
回答by Diablo
Try this:
尝试这个：
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var id = aData[0];
$(nRow).attr("id",id);
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
}
For adding row to datatable try this code from :
要将行添加到数据表，请尝试以下代码：
http://datatables.net/examples/api/add_row.html
http://datatables.net/examples/api/add_row.html
/* Global var for counter */
var giCount = 1;
$(document).ready(function() {
$('#example').dataTable();
} );
function fnClickAddRow() {
$('#example').dataTable().fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4" ] );
giCount++;
}
回答by d.danailov
Official documentation says:
官方文档说：
var table = $('#example').DataTable();
table
.rows.add( [
new Pupil( 43 ),
new Pupil( 67 ),
new Pupil( 102 )
] )
.draw()
.nodes()
.to$()
.addClass( 'new' );
Please read: rows.add()
请阅读：rows.add()
回答by George SEDRA
$(document).ready(function() {
oTable = $('#table_id').dataTable( {"fnInitComplete": after_init} );
} );
function after_init(){
$("#table_id tbody tr").addClass("gradeA");
}
回答by Etienne Prothon
After reading the documentation this work for me:
阅读文档后，这对我有用：
var my_dataTable = $('#my-table').DataTable();
my_dataTable.row.add( [
'Hello',
'Hello2',
'Hello3',
'Hello4'
] ).draw().nodes().to$().addClass("my_class");
回答by Vasil Karpachev
This should do the trick:
这应该可以解决问题：
var r = t.row.add( [
....
] ).node();
$(r).css({"color":"red"});
回答by jasonpgignac
Alright, perhaps I'm not understanding exactly what your question is, but if you were just adding the row, why not set the class before you add it? Like this, somewhat sloppy, example:
好吧，也许我不明白你的问题是什么，但如果你只是添加行，为什么不在添加之前设置类？像这样，有点马虎，例如：
jQuery("<tr />")
.html(your_var_containing_the_interior_dom)
.addClass("yourClass")
.appendTo(jQuery("#yourTable"))
