Add dynamic buttons to each report row and bind the row data to buttons specific to that row

Question

I have a page with a form at the top and a report at the bottom which is tied to a table. I need to add a pair of buttons for each row of the table and add dynamic actions for these buttons. I need to submit the data corresponding to the row to a REST service and refresh the table/row. I know it is possible to add ajax call and refresh the table after the response is received. But I am not sure how I can dynamically include a pair of buttons on each row and have the access the data corresponding to the record when a particular button is clicked. I was not able to find such a feature using the help page. Can you please let me know if this is possible. Thanks in advance.
Below is the representation of how I need the page to look like.
Col 1
Col 2
Col 3
data 1
data 21
data 31
Button 1
Button 2
data 2
data 22
data 32
Button 1
Button 2
data 3
data 23
data 33
Button 1
Button 2
data 4
data 24
data 34
Button 1
Button 2
I should be able to access data 1, data21, data 31 from button 11 and button21 etc.

Answer 1

select data1,
          data2,
          data3,
          null button1,
          null button2,
          rowid r_id
from .....
If you edit the column for button1 and navigate to the Column Formatting region you can create your button here, several different ways.  You will need to play around with how you prefer.  See below:
<input class="button1" type="button" id="#R_ID#" value="label for the button" /> or <button id="#R_ID#">label for button</button> or you could use <a> and apply css of your theme.
You also create both buttons in a single column.  From here you can reference any of the columns from your select by using the #COLUNMNAME# format (as I did with R_ID).
You will next need to something similar for all columns you want to be able to grab when you click the buttons.  See below:
--- This would be for data1 column
<span id="D1-#R_ID#">#DATA1#</span>
You would do these for each column that you want access to when button clicked as mentioned above.  You could bypass this step and use jquery to traverse the DOM using .closest() and .find() and give each column a distinct class.  Is is your preference.
You would then create a dynamic action triggered when .button1 is clicked.  Now that you have that object you can get the id of the triggering object which would be your r_id and from there you can access all your individual data points(all this done in a javascript in the dynamic action) and assign to hidden items on your page.  The next step of that dynamic action you could execute pl/sql and pass those in page items.
Hope that all makes sense.
David
Message was edited by: DLittle
Just as a bit of clarification:  the r_id column does not have to be rowid, but it does need to be unique for each row return.  You could use your primary key or rownum.  Whatever works for your scenario.