put data attribute on row add on DataTables 1.10

Question

I dynamically add new row on DataTables 1.10.2 using the table.row.add() method using this code:

table.row.add([
    '',
    name,
    target_l,
    details,
    panel.html()    
]).draw();

I produced this mark-up:

<tr role="row" class="odd">
    <th>1 .</th>
    <td class="sorting_1">ID Fee</td>
    <td>All students</td>
    <td></td>
    <td>
        <button class="btn btn-null btn-xs" onclick="_remove(59, 'ID Fee')">
            <span class="fui-cross"></span>
        </button>
        <button class="btn btn-null btn-xs" onclick="_edit(59, 'ID Fee', '', '')">
            <span class="icon-pencil"></span>
        </button>
    </td>
</tr>

What I want to do is to add a data-id (and other data) attribute to the newly added tr tag (on or after row insert) and make it something like this:

<tr data-id="59" role="row" class="odd">

I've managed to get the index of the newly added row using the code and it returns the last row index:

var i = table.row.add([
    '',
    name,
    target_l,
    details,
    panel.html()    
]).index();

And also tried to perform the following to add the data-id attribute using that index:

var id = $("#department_id").val();
table.row(i).attr("data-id", id);
// table.row(i).data("id", id);
// I wanted to try this but there is also a method called data() already in
// DataTables so it will not work like in JQuery.

I'm new to DataTables and already scrolled its sourcecode, red the comments. Though not good at understanding its functions that begins with _fn*(). If there's any other way without relying on these _fn*() functions, thanks!

Answer 1

You can use rows().nodes() API function, see below:

var i = table.row.add([
    '',
    name,
    target_l,
    details,
    panel.html()    
]).index();

var id = $("#department_id").val();
table.rows(i).nodes().to$().attr("data-id", id);