Adding jquery row with hidden column

Adding jquery row with hidden column

sjurmrsjurmr Posts: 3Questions: 2Answers: 0

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

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • sjurmrsjurmr Posts: 3Questions: 2Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

This discussion has been closed.