The updated data for rows doesn't appear when I update the row using fnupdate()

Spitzname

Hi to all, i try to update the row of the table by using fnupdate as the following,
the record number I want to update is 7, to show it I click on the arrow.
problem: fnupdate works on the records shown, but it doesn't work when I click on the arrow until I click twice.
when I click for the first time, the data returns successfully from the ajax request but doesn't appear in the table.
The data and tablerow are correct.

 $(document).ready(function () {
                $('.dataTable').on('click', 'tbody tr', function() {                                                         
                    rowdata =  table.row(this).data().country;    
                    var tableRow = $(this).closest('tr').index(); // GET TABLE ROW NUMBER   
                    $.ajax({
                        type: "GET",
                        data: { ip: rowdata },                    
                        url: "{{ route('getdata') }}"
                    }).then(function(data){                                           
                        $('.dataTable').dataTable().fnUpdate(data, [tableRow], 7, false);                                                      
                    });
                });
});

colin

fnUpdate() is legacy, it's been replaced by row().data(). You're using the getter on line 3, you just need to use it as a setter to update the data,

Colin

Spitzname

@colin
row().data() doesn't update the table's internal caches of data until the draw() method is called,
I need to update the value from the row without reloading the data.
In my code I'm using a getter to get the country name (by passing the address from the table)
Then I need to update the row with the name of the country

kthorngren

I need to update the value from the row without reloading the data.

Why? Are you using server side processing or is there another reason? Using draw() won't reload data unless you are using server side processing.

Using fnUpdate() in this example works:
http://live.datatables.net/yosicaqe/1/edit

If its not working for you then we will need to see the problem to help debug. Please post a link to your page or a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Spitzname

@kthorngren
I use server-side processing.
fnUpdate() works on the records shown, but it doesn't work when I click on the arrow until I click twice (when the result is returned, the row is not updated immediately)
as the following:

kthorngren

The client side Datatables APIs aren't intended to work with server side processing. It is expected that the row data is provided by the server.

but it doesn't work when I click on the arrow until I click twice

Is the arrow for Responsive or child row details?

Again please provide a test case showing what you are doing so we can take a look.

Kevin

Spitzname

@kthorngren Thanks a lot for your support
I used row().child as the following and worked with me

function format ( d ) {
                // `d` is the original data object for the row       
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:10px;">'+
            '<tr>'+
                '<th> Action </th>'+
                '<td>'+d.action+'</td>'+
            '</tr>'+
            '<tr>'+
                '<th> Country </th>'+
                '<td>'+d.country+'</td>'+
            '</tr>'+            
            '</table>';
        }

      $('.data-table tbody').on('click', 'td.dtr-control', function () {

            var tr = $(this).closest('tr');
            var row = table.row( tr );
            countrydata =  table.row(this).data().country;
            actiondata =  table.row(this).data().action;  

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(tableData) ).show();
                tr.addClass('shown');
            }

            if (!countries.includes(countrydata)) {                               
                $.ajax({
                    type: "GET",
                    data: { ip: countrydata },                   
                    url: "{{ route('getCountry') }}"                    
                }).then(function(data){   

                    tableData = {country: data, action: actiondata};                                         
                    // Open this row
                    row.child( format(tableData) ).show();
                    tr.addClass('shown');                        
                });   

                countries.push(countrydata);        
            }else{                       
                    if ( row.child.isShown() ) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child( format(tableData) ).show();
                        tr.addClass('shown');
                    }
            }           

        } );      
    } );