JS Update responsive child

kickbk

I am loading a datatable and assigning each row a unique ID.
Then after it is loaded I have a script that fetches click info data. Once the data is available, I update cells within rows via their ID/class. Something like:
...

$.ajax({
        url: "clicks",
        type:'GET',
        format:'json',
        success: function(data,status,xhr){
            $.each(data, function( target, info ) {
                var row = document.getElementById(target);
                var clicks_cell = $(row).find(".clicks");
                clicks_cell.text(info.clicks);
            });
            ...

This works perfectly fine, however, I run into problems with responsive child rows.
The responsive rows are created dynamically, so they keep displaying the defaultContent of the cell. So I thought I will add an ID to the child rows via responsive.details.renderer and then update those cells as well.
However, the responsive cells are only generated when the button is clicked, and even if I did manage to update them, the content would probably reset to the defaultContent next time the button would be pressed.

Any suggestions on how to pass the info.clicks data to the responsive child cell? is there an example?

colin

Hi @kickbk ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kickbk

@colin sorry, I should have done this earlier: https://codepen.io/kickbk/pen/mdbQMYY

You will see I am loading a datatable and simulating the update of a cell via JS after datatable init. You will notice that if you see all cells on load, the text in the last td will display "UPDATED TEXT", however, when you shrink the page and the child row is created, the text will show "ORIGINAL TEXT"

I am curious how I can have that child cell inherit the content of the non-responsive cell.

colin

Hi @kickbk ,

That's because you're changing the data in the DOM, but DataTables has no knowledge of it. If you cell().data() then DataTables will update it's cache.

Change your update line to be:

    this.api().cell(':eq(0)', -1).data('UPDATED TEXT!');

Cheers,

Colin

kickbk

@colin thank you for the answer. It helps, but I am still stuck. How would I update a cell that was loaded with data null and defaultContent? See this example that illustrates it https://codepen.io/kickbk/pen/ZEzVymN
You will see that your solution works on a cell that was initialized with data, but when we try it on a cell that was initialized with data: null, it doesn't.

colin

Hi @kickbk ,

Ah, yep, null is a special case for -options columns.data :

the data passed to the rendering function will be the original data source for the row

so that means it will never take the modified value.

If you remove data: null, it works as expected, see here.

Cheers,

Colin

kickbk

Perfect. Thanks @collin!