如何在 jQuery 数据表中的新行中添加一个类？

Question

我该如何在datatable中添加一个类到我正在添加的行中？

如果不可能，那么我如何使用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);

- Pierluc

---

怀疑这真的有帮助，但还是做了。我尝试了许多其他方法，但没有结果。 - Pierluc

还是有一种方法可以通过datatables函数简单地添加HTML行到datatable中。 - Pierluc

Answer 1

尝试将您的fnRowCallback更改为以下内容：

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

你可以参考官方文档来更好地理解这个回调函数。

- Johnny Oshika

---

我找到了最佳解决方案。我想将一个类添加到特定列而不是行。 $($(nRow).children()[1]).attr('class', 'status-indicator'); - rhigdon

Answer 2

您可以按照文档中描述的方法在数据本身中添加类名称。 http://www.datatables.net/examples/server_side/ids.html 使用 DT_RowId 为任何行添加ID， 使用 DT_RowClass 为任何行添加类， 使用 DT_RowData 为任何行添加HTML5数据对象。

例如：

"data":[ { "DT_RowId": "row_5", "first_name": "Airi", "last_name": "Satou", "position": "会计", "office": "东京", "start_date": "2008年11月28日", "salary": "$162,700" } ]

- user1191811

Answer 3

试试这个：

"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++;
}

- Diablo

Answer 4

官方文档说：

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()

- d.danailov

---

这段代码是用于查看多行，而我的代码是用于查看单行。 - Etienne Prothon

Answer 5

$(document).ready(function() {
    oTable = $('#table_id').dataTable( {"fnInitComplete": after_init} );
} );
function after_init(){
    $("#table_id tbody tr").addClass("gradeA");
}

- George SEDRA

Answer 6

阅读文档后，这对我有效：

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");

- Etienne Prothon

Answer 7

这应该可以解决问题：

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

- Vasil Karpachev

---

我不知道为什么这个被踩了，它解决了问题（除了添加内联CSS）。使用这种技术添加类，只需将$(r).css更改为$(r).addClass('class'); - Jamie Poole

Answer 8

好的，也许我没有完全理解你的问题，但如果你只是在添加行，为什么不在添加之前设置类呢？就像这个有点随意的例子：

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

- jasonpgignac