How to ajax reload / redraw a single row

How to ajax reload / redraw a single row

crcucbcrcucb Posts: 59Questions: 17Answers: 0

I have a datatable called Addresses. I use addresseditor to control any edits. addresseditor contains a datafield of datatable type called comments. If I update or delete a comment, I want to redraw the row in table Addresses.

Below is a function off commentsEditor

commentsEditor.on('submitSuccess', function (e, json, data, action) {
        addresseditor.field('Comments').dt().ajax.reload();
        $('#Addresses').DataTable().ajax.reload();
    
});

The above refreshes the entire Addresses datatable which takes a few seconds (I need to optimize the underlying source sql tables and queries).

When I look at how to redraw just one row, I see references to this page: https://datatables.net/reference/api/row().data() but it looks like I have to provide data to row vs letting it requery from the server.

I did try this:

var maintable = $('#Addresses').DataTable();
maintable.row(this).data().draw();

I wasn't sure if this under commentsEditor would point back to the comments being edited or the main table, regardless I get an error.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 22,186Questions: 26Answers: 5,106
    edited July 21 Answer ✓

    Since you didn't post any code I will make some assumptions. I assume you are doing something like this example and not parent / child editing. I also assume that you are using single select in the Addresses table. I'm not sure what you want to update in the Addresses table once a comment is updated.

    Possibly you can do something like this assuming the Address table is being updated from the commentsEditor JSON response:

    commentsEditor.on('submitSuccess', function (e, json, data, action) {
        var maintable = $('#Addresses').DataTable();
    
        // Get the selected row in Addresses
        var row = maintable.row( { selected: true } );
    
        // Get the data for that row
        var AddressesData = row.data();
    
        // Update the AddressesData for the row from the submitSuccess data parameter
        AddressesData.comments = data.comments
    
        // Update the Addresses row data
        row.data( AddressesData ).draw();
    });
    

    I made some assumptions of your data structures. Likely you will need to make changes based on your specific config. Possibly the above won't work if my assumptions are wrong. Hope it points you in the right direction.

    Kevin

Sign In or Register to comment.