3

I use jQuery Datatable for listing records and add an Action button (Edit) for editing the record on a modal dialog. If I select a row I can get the row id value and open the related record on modal dialog. However, if I click the Edit button directly, I cannot get the Id value of the related record (on the same row) because it is not selected first when clicking Edit button. What I want to do is that: I want to get the Id value of the row on which I click the Edit button. Is it possible? If not, can I select the hovered row programmatically when I click the Edit button? (If the prior scenario is possible I would prefer it). Any idea?

function openModal() {

    var table = $('#dtbListAccount').DataTable();
    var oRow = $('this').parents('tr')[0];
    var oData = table.fnGetData(oRow);

    //code omitted for brevity
};

enter image description here

Jack
  • 1
  • 21
  • 118
  • 236

4 Answers4

12

You can use this code to achieve this.

var table;
$(document).ready( function () {
 table  = $('#example').DataTable();
} );

$('body').on('click', '#btnEdit', function(){
    //to get currently clicked row object
    var row  = $(this).parents('tr')[0];

    //for row data
    console.log( table.row( row ).data() );

});

It will return row data as a string array.

Live Demo Here

Use the browser console to see the results.

mmushtaq
  • 3,430
  • 7
  • 30
  • 47
3

Here's the full source code. Hope this helps :)

//when button (edit button here) is clicked.... Note: no need id for buttons too, just use <button> tag
$('table button').click(function() {
  var tr = $(this).closest('tr');
  var id = tr.children('td:eq(0)').text(); //get the text from first col of current row
  console.log(id); //you'll get the actual ids here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Hans</td>
    <td>Jahnsen</td>
    <td>
      <button>Edit</button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Robert</td>
    <td>Boylstat</td>
    <td>
      <button>Edit</button>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>Jim</td>
    <td>Alexi</td>
    <td>
      <button>Edit</button>
    </td>
  </tr>
</table>
Nava Bogatee
  • 1,465
  • 13
  • 15
  • 1
    This also seems to be an elegant solution but always returns "1" as id value. On the other hand, originating from your answer, I found a similar approach on [jQuery: Get the contents of a table row with a button click](http://stackoverflow.com/questions/14460421/jquery-get-the-contents-of-a-table-row-with-a-button-click) page. Thanks a lot. Voted+ – Jack Sep 09 '16 at 07:50
  • Would it be possible to make the row editable on click.... rather than button click i.e. Edit... ? – singhswat Apr 30 '18 at 13:44
0

Assign the row-id(s) to the edit buttons as well, write click events for the edit buttons which, based on the id of the button clicked on, triggers the edit functionality / view.

You could assign the row-id(s) to the buttons either when rendering itself, or write a small function that does the same on page load.

-1

If the id is on the parent container then find it's value and use it. If it's a sibling then do the same.

Darkrum
  • 1,325
  • 1
  • 10
  • 27
  • Could you please add the example code to your answer? – Jack Sep 08 '16 at 17:55
  • I'm not familiar with jQuery Datatable. Can you please post what it's DOM structure looks like when it out puts to the document including where your edit button resides. – Darkrum Sep 08 '16 at 17:58
  • Thanks a lot for your answer, but I solved the problem with the help of mmushtaq's answer. Voted+ – Jack Sep 08 '16 at 19:07