Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery Mark the new added row in datatable

I have a existing datatable in my html page, and I try adding new row using fnAddData

var addId = vandropDatatable.fnAddData(["1", "2"]);

How can I findout the new added row to add some class for it (for example addClass("New_item") )

like image 988
VinhNT Avatar asked Mar 21 '23 06:03

VinhNT


1 Answers

Updated in order to reflect dataTables 1.10.x. The original answer below was targeting 1.9.x. It is still applicable but the 1.10.x API way is more powerfull :

$("#add").click(function() {
    var row = table.row.add([
        'new',
        'new',
        'new',
        'new',
        'new'
    ]).draw();
    row.nodes().to$().addClass('newRow');
});

1.10.x demo -> http://jsfiddle.net/0scq8rkm/

In 1.10.x you get an API object back, holding the row. nodes().to$() let you work on the internal row node as it was a jQuery object.


Lets say you want to give new <tr>'s the following layout :

tr.newRow {
    background-color: red;
    font-size: 20px;
}

and you have an add button :

<button id="add">add new row</button>

now, when clicking on the add button, use the returned rowindex for the newly created <tr> to get the right row through the function fnGetNodes :

$("#add").click(function() {
    var rowIndex = dataTable.fnAddData([
        'new',
        'new',
        'new',
        'new',
        'new'
    ]);
    var row = dataTable.fnGetNodes(rowIndex);
    $(row).removeClass().addClass('newRow');
});

see fiddle -> http://jsfiddle.net/q4E3Y/

like image 192
davidkonrad Avatar answered Mar 27 '23 22:03

davidkonrad