2010-07-09 44 views
10

如何向我在数据表中添加的行添加类?如何将类添加到jQuery数据表中的新行?

如果不行,我该如何使用fnRowCallbackfnDrawCallback来更改类?

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); 
+0

怀疑它会真正帮助,但完成。我尝试了很多其他的东西,但没有结果。 – Pierluc 2010-07-09 15:31:11

+0

还是有没有办法,我可以简单地添加一个html行,通过datatables功能 – Pierluc 2010-07-09 15:38:33

回答

-4

好吧,也许我不理解你的问题是什么,但如果你是刚刚加入该行,为什么不设置你之前类添加它?与此类似,有点草率,例如:

jQuery("<tr />") 
    .html(your_var_containing_the_interior_dom) 
    .addClass("yourClass") 
    .appendTo(jQuery("#yourTable")) 
19

试着改变你的fnRowCallback以下几点:

"fnRowCallback": function(nRow, aData, iDisplayIndex) { 
    nRow.className = "gradeX odd"; 
    return nRow; 
} 

您可以参考offical documentation进一步了解这个回调函数。

+1

数据表我找到了最佳解决方案。我想添加一个类到特定的列而不是行。 $($(nRow).children()[1])。attr('class','status-indicator'); – rhigdon 2012-12-12 23:57:06

4

试试这个:

"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++; 
} 
2
$(document).ready(function() { 
    oTable = $('#table_id').dataTable({"fnInitComplete": after_init}); 
}); 
function after_init(){ 
    $("#table_id tbody tr").addClass("gradeA"); 
} 
9

您可以在数据本身添加类名描述在文档中。

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”
}]

1

这应该做的伎俩:

var r = t.row.add([ 
    .... 
]).node(); 
$(r).css({"color":"red"}); 
+0

我不知道为什么这是低调投票,这解决了问题(除了它添加内联CSS) 要使用此技术添加一个类只需将$(r).css更改为$(r).addClass('class “); – 2016-03-22 16:46:38

1

官方文件说:

var table = $('#example').DataTable(); 

table 
    .rows.add([ 
     new Pupil(43), 
     new Pupil(67), 
     new Pupil(102) 
    ]) 
    .draw() 
    .nodes() 
    .to$() 
    .addClass('new'); 

请阅读:rows.add()

+0

这段代码是用于多行查看我的单行。 – 2016-10-04 08:53:01

0

阅读文档这个工作对我来说后:

var my_dataTable = $('#my-table').DataTable(); 
my_dataTable.row.add([ 
       'Hello', 
       'Hello2', 
       'Hello3', 
       'Hello4' 
      ]).draw().nodes().to$().addClass("my_class"); 
相关问题