如何将类添加到jQuery数据表中的新行?
如何向我在数据表中添加的行添加类?如何将类添加到jQuery数据表中的新行?
如果不行,我该如何使用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";
}
});
上面的代码给了我一个错误。
这是我添加的行:
oTable.fnAddData(arr);
好吧,也许我不理解你的问题是什么,但如果你是刚刚加入该行,为什么不设置你之前类添加它?与此类似,有点草率,例如:
jQuery("<tr />")
.html(your_var_containing_the_interior_dom)
.addClass("yourClass")
.appendTo(jQuery("#yourTable"))
试着改变你的fnRowCallback
以下几点:
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
nRow.className = "gradeX odd";
return nRow;
}
您可以参考offical documentation进一步了解这个回调函数。
数据表我找到了最佳解决方案。我想添加一个类到特定的列而不是行。 $($(nRow).children()[1])。attr('class','status-indicator'); – rhigdon 2012-12-12 23:57:06
试试这个:
"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;
}
对于添加一行数据表试试这个代码:
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++;
}
$(document).ready(function() {
oTable = $('#table_id').dataTable({"fnInitComplete": after_init});
});
function after_init(){
$("#table_id tbody tr").addClass("gradeA");
}
您可以在数据本身添加类名描述在文档中。
http://www.datatables.net/examples/server_side/ids.html
使用DT_RowId用于添加ID为任何行
使用DT_RowClass用于添加类的任何行
使用DT_RowData用于添加HTML5数据对象的任何行
例如:
“data”:[ {
“DT_RowId”: “row_5”,
“FIRST_NAME”: “爱理”,
“姓氏”: “佐藤”,
“位置”: “会计”,
“办公室”:“东京”
“起始日期”: “08年11月28日”,
“工资”: “$ 162 700”
}]
这应该做的伎俩:
var r = t.row.add([
....
]).node();
$(r).css({"color":"red"});
我不知道为什么这是低调投票,这解决了问题(除了它添加内联CSS) 要使用此技术添加一个类只需将$(r).css更改为$(r).addClass('class “); – 2016-03-22 16:46:38
官方文件说:
var table = $('#example').DataTable();
table
.rows.add([
new Pupil(43),
new Pupil(67),
new Pupil(102)
])
.draw()
.nodes()
.to$()
.addClass('new');
请阅读:rows.add()
这段代码是用于多行查看我的单行。 – 2016-10-04 08:53:01
阅读文档这个工作对我来说后:
var my_dataTable = $('#my-table').DataTable();
my_dataTable.row.add([
'Hello',
'Hello2',
'Hello3',
'Hello4'
]).draw().nodes().to$().addClass("my_class");
怀疑它会真正帮助,但完成。我尝试了很多其他的东西,但没有结果。 – Pierluc 2010-07-09 15:31:11
还是有没有办法,我可以简单地添加一个html行,通过datatables功能 – Pierluc 2010-07-09 15:38:33