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

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

SpitznameSpitzname Posts: 6Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

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

    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

  • SpitznameSpitzname Posts: 6Questions: 2Answers: 0
    edited November 2021

    @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

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

    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

  • SpitznameSpitzname Posts: 6Questions: 2Answers: 0

    @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:

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • SpitznameSpitzname Posts: 6Questions: 2Answers: 0
    edited November 2021

    @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');
                        }
                }           
    
            } );      
        } );  
    
Sign In or Register to comment.