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!

in your commented code, you say you wanted to do something like table.row(i).data("id",id); but cannot since DataTables has a function data. Have you tried wrapping table.row(i) in a jQuery function then calling jQuery's data on that? — Blundering Philosopher
– Blundering Philosopher, Commented Nov 7, 2014 at 17:20
table.row(i) is not a jquery object. You can't expect the data or attr functions to work with it. You'd need to wrap it first in the jQuery function before you can use the other functions $(table.row(i)).data("id", id); — evolutionxbox
– evolutionxbox, Commented Apr 15, 2015 at 16:37

Gyrocode.com · Accepted Answer · 2016-05-25 00:52:17Z

12

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

edited May 25, 2016 at 0:52

answered May 1, 2015 at 5:21

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Felipe Leão Over a year ago

Not sure why, but .to$() is not working on .node() for me. Had to use $( table.row(i).node() )

Gyrocode.com Over a year ago

@FelipeLeão, thanks for you comment. It appears that to$() only works with nodes() and not node() which is kind of undocumented. Your workaround is fine.

mpemburn Over a year ago

.to$() turns the node into a jQuery element.

Collectives™ on Stack Overflow

put data attribute on row add on DataTables 1.10

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related