Adding jquery row with hidden column

sjurmr

Hi,

I want to be able to copy a table row but alter the contents with jquery before adding it. I have tried copying using nodes().toJQuery().clone() and then adding the row. This works fine if all columns are visible, but hidden columns create a "Cannot set property '_DT_CellIndex' of undefined" error in the js console.

I have created a JS Fiddle replicating my problem here:
https://jsfiddle.net/f5rs490n/

Is there something I am missing here or is this a bug or known limitation of DataTables?

Thanks,
Sjur

colin

Hi @sjurmr ,

It's because you've got a hidden column, so when you ask for the row().node(), it only returns the visible nodes - which isn't enough when you then add the row.

If you get the data instead, with row().data(), and pass that into row.add() you should be good - see here.

Cheers,

Colin

sjurmr

Colin,

Thanks for replying. However, I need to manipulate the DOM of the row before adding it, that was why I was using nodes().toJQuery(). Is there a way to get a jquery object of the data?

Thanks,
Sjur

kthorngren

One way would be to set all the columns visible get the nodes then hide the desired columns, like this:
https://jsfiddle.net/j0mvrLd1/

Its not noticeable in the example but it may be in production. Might depend on how many columns there are or how many rows are displayed.

The other option I can think of is to use Colin's example then get a jQuery object of the desired columns, something like var col1 = $(row[1]).

There are probably others. Maybe you can update the example with more specifics of what you are trying to do.

Kevin