Wie füge ich einer neuen Zeile in einem jquery-Datatable eine Klasse hinzu?

Question

Wie kann ich der Zeile, die ich der Datentabelle hinzufüge, eine Klasse hinzufügen? Wie kann ich fnRowCallback oder fnDrawCallback verwenden, um die Klasse zu ändern?

Der obige Code gibt mir einen Fehler.

das ist, wie ich die Zeile hinzufügen:

oTable.fnAddData(arr); 

Answer 1

Okay, vielleicht bin ich verstehe nicht genau, was Ihre Frage, aber wenn Sie nur die Zeile hinzugefügt wurden, warum nicht die Klasse festlegen, bevor Sie hinzufügen? Wie diese etwas schlampig, Beispiel:

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

Answer 2

Versuchen Sie fnRowCallback an folgende Veränderung:

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

Sie auf die offical documentation weiter verweisen können, um diese Callback-Funktion zu verstehen.

Answer 3

Try this:

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

Für Zeile Datatable Hinzufügen versuchen diesen Code aus:

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

Answer 4

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

Answer 5

Sie können den Klassennamen in den Daten selbst, wie beschrieben hinzufügen in der Dokumentation.

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

Verwendung DT_RowId für ID für jede Zeile
Verwendung DT_RowClass zum Hinzufügen Klasse für jede Zeile
Verwendung DT_RowData zum Hinzufügen html5 Datenobjekt zu einer beliebigen Zeile

zB Hinzufügen :

"Daten": [ {
"DT_RowId": "row_5",
"first_name": "Airi",
"last_name": "Satou",
"Position": "Buchhalter",
"Büro": „Tokyo “
"start_date": "28. 8. November",
"Gehalt": "162.700" $
}]

Answer 6

Diese den Trick tun sollten:

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

Answer 7

Offizielle Dokumentation sagt:

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

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

Bitte lesen: rows.add()

Answer 8

Nach der Dokumentation dieser Arbeit für mich zu lesen:

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