dynamic button in responsive table

qasimkhans

Hi,
i am using dataTable responsive. i am trying to add dynamically a button by press Add button in last column of row.
i can see in console new button was added but not showing in last column of first row when i click on + sign
here is my code. https://fiddle.jshell.net/6faumn44/4/

Your help will be highly appreciated. Thanks.

kthorngren

I think the problem is the last column is moved to a child row and the column is hidden when responsive kicks in. The button definition doesn't move. Maybe you can add it directly into the table data.

Something like this maybe?

  $(".addbtn").on('click',function(){
    var data = table.row(0).data();
    data[3] = "<button type='button' class='btn btn-info btn-xs' style='font-size: 9px;'>New BtN</button>";
    table.row(0).data(data);
    table.draw();
  });

EDIT: This option may not work as desired. When the table is displayed normally the button click event handler for the new button works. But when its a child row in responsive mode the event handler doesn't intercept the click.

Kevin

qasimkhans

Thanks it working, but it is overriding the current data. i need to add button next to current data in the cell.