如何将类添加到 jquery 数据表中的新行？答案

【问题标题】：How to add a class to a new row in a jquery datatables?如何将类添加到 jquery 数据表中的新行？
【发布时间】：2010-07-09 15:22:40
【问题描述】：

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

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

【问题讨论】：

怀疑它是否真的有用，但完成了。我尝试了许多其他方法，但没有结果。
或者有没有办法我可以通过数据表函数简单地将一个 html 行添加到数据表中

标签： jquery datatables addclass

【解决方案1】：

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

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

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

【讨论】：

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

【解决方案2】：

您可以按照文档中的说明在数据本身中添加类名。

http://www.datatables.net/examples/server_side/ids.html

使用 DT_RowId 为任何行添加 id
使用 DT_RowClass 为任何行添加类
使用 DT_RowData 将 html5 数据对象添加到任何行

例如：

“数据”：[ {
“DT_RowId”：“row_5”，
"first_name": "爱里",
"last_name": "佐藤",
"职位": "会计",
"办公室": "东京",
“开始日期”：“2008 年 11 月 28 日”，
“薪水”：“162,700 美元”
}]

【讨论】：

【解决方案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++;
}

【讨论】：

【解决方案4】：

官方文档说：

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

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

请阅读：rows.add()

【讨论】：

此代码用于多行查看我的单行。

【解决方案5】：

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

【讨论】：

【解决方案6】：

这应该可以解决问题：

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

【讨论】：

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

【解决方案7】：

在阅读了对我有用的文档后：

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

【讨论】：

【解决方案8】：

好吧，也许我不明白你的问题是什么，但如果你只是添加行，为什么不在添加之前设置类？像这样，有点草率，例子：

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

【讨论】：