10

データテーブルに追加する行にクラスを追加するにはどうすればよいですか?

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

8 に答える 8

19

fnRowCallback次のように変更してみてください。

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

このコールバック関数をさらに理解するには、公式ドキュメントを参照してください。

于 2011-01-05T18:59:22.400 に答える
9

ドキュメントで説明されているように、データ自体にクラス名を追加できます。

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

任意の行に id を追加するにはDT_RowIdを使用します 任意の行にクラスを追加するにはDT_RowClass
を 使用します 任意の行に html5 データ オブジェクトを追加するにはDT_RowDataを 使用します

例えば：

"data": [ {
"DT_RowId" : "row_5",
"first_name": "あいり",
"last_name": "佐藤",
"position": "経理",
"office": "東京",
"start_date": "2008 年 11 月 28 日"、
"給与": "$162,700"
}]

于 2014-10-13T07:15:52.240 に答える
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++;
}
于 2011-01-07T01:10:54.870 に答える
3

公式ドキュメントには次のように記載されています。

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

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

読んでください：rows.add（）

于 2016-06-14T11:46:38.093 に答える
2 
$(document).ready(function() {
    oTable = $('#table_id').dataTable( {"fnInitComplete": after_init} );
} );
function after_init(){
    $("#table_id tbody tr").addClass("gradeA");
}
于 2013-07-19T07:58:56.187 に答える
1

これでうまくいくはずです：

var r = t.row.add( [
    ....
] ).node();
$(r).css({"color":"red"});
于 2015-08-21T13:22:04.200 に答える
-4

わかりました、おそらくあなたの質問が何であるかを正確に理解していませんが、行を追加するだけなら、追加する前にクラスを設定してみませんか? このように、ややずさんな例:

jQuery("<tr />")
  .html(your_var_containing_the_interior_dom)
  .addClass("yourClass")
  .appendTo(jQuery("#yourTable"))
于 2010-07-09T19:18:37.470 に答える