Custom button, ajax GET request - how to update rows?

paweltrela

Hello,

I am using datatables editor. I would love to use custom button to call the method from backend
and update the table with the response.

This is my button code:

                {
                    text: 'Archiwum',
                    action: function(e, dt, node, config) {
                      $.ajax({
                          "url": "/api/archive/<%= @board.id %>",
                          "type": "GET",
                          "datatype": 'json',
                          "success": function (data) {
                          }
                      });
                    }
                }

This is the response i get when i click this button:

{"data":[{"DT_RowId":653,"task_timer":"00:00:00","order":2,"name":"test211","task_deadline":"","task_status":"Zaakceptowano","board_id":3,"task_group":"Poprawki","created_at":"2020-05-13T11:59:56.909+02:00","updated_at":"2020-06-15T14:28:40.689+02:00","assigned":[]}]}

The response looks fine but the problem is that my table is not updated.
My response doesn't have a caching ID:

I guess i should add some code inside success function - can you help me with telling what?

kthorngren

In the success function you will need to update the row data. You can use row().data(). Loop through the data object and update the rows by using the DT_RowId value as the row-selector. I think you should be able to use the String #ID example. Something like this:

rows = data.data;
for (i=0; i<rows.length; i++) {
  var rowId = '#' + rows[i].DT_RowId;
  table.row( rowId ).data( rows[i] );
}
table.draw();

DIdn't test this but I think it should be close to what you need.

Kevin

paweltrela

@kthorngren thank you for your answer,
Actually i found out, i can do it in other way,
i don't want to directly update and change some columns in this Ajax call,
i just want to replace data with new data (completely different rows).

This is how i did it, maybe someone can use it in future:

{
  text: 'Archiwum',
  attr: {
    id: 'archive-button',
    class: "dt-button aqua-gradient text-white border-0"
  },
  action: function(e, dt, node, config) {
    table.ajax.url( '/api/archive/<%= @board.id %>' ).load();
  }
}