jQuery datatables - how to grab row value

Question

it's my first question here, but I'm learning from stackoverflow since years now.

In my local application (PHP, MySql, Html, Javascript) I have a jQuery datatable, and in the last column the user can show (as PDF) or delete a row by clicking on an icon (-> uses fontawesome).
The data in the table comes in with Ajax from a JSON file.

Here is the datatable HTML code:

<tbody>
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">customer 1</td>
<td class=" dt-body-center">
<a href="javascript:void(showPDF(25,223150,0));"><i class="fa fa-search-plus"></i></a>
<span data-cid="25" data-ordid="223150"><i class="fa fa-trash-alt"></i></span>
</td>
</tr>
...

For deleting a row I formerly started a Javascript function, with an Ajax request doing the needed operations on the database, but I wasn't able to integrate the functionality of deleting the row from my datatable.

Then I changed my strategy starting from the datatable triggering the click event on the icon.
With this I am able to successfully delete the row from the datatable (NOT the database.) but I wasn't able to figure out how to grab the needed ID's for launching the delete operations: I write these ID's (customer-id, cid: order-id, ordid) in < span data-id=cid. data-ordid=ordid>.

var table1 = $('#myTable1').DataTable();
$('#myTable1 tbody').on('click', 'i.fa-trash-alt', function () {
   table1
       .row($(this).parents('tr'))
       .remove()
       .draw();
});

My problem is that I am not able to get the ID's in the < span>. Looking at the (Firefox) debugger I can see them under "(this) - parentElement: span - dataset: DOMStringMap(2) - cid:25 and ordid:223150".
Tried things like: "var cid = table1.row($(this).dataset('cid')" and variants but nothing worked for me and unfortunately my jQuery knowledge is very basic. Have searched an answer for hours now, but didn't find the solution.

Can someone point me in the right direction please or even give some explanation how to grab a value with jQuery seeing the exact position in the Firefox debugger?

Answer 1

You can try the following code, you can receive event object in listener and then get attributes from it's parent span.

 $(document).ready(function(){ var table1 = $('#myTable1').DataTable(); $('#myTable1 tbody').on('click', 'i.fa-trash-alt', function (e) { //you can get ids from parent span attribute like: var cId = e.target.parentNode.attributes['data-cid'].value; var ordId = e.target.parentNode.attributes['data-ordid'].value alert(cId); table1.row($(this).parents('tr')).remove().draw(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <table id="myTable1"> <thead> <tr> <th>title-1</th> <th>title-2</th> <th>Remove</th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="sorting_1" tabindex="0">customer 1</td> <td class=" dt-body-center"> another column </td> <td><span data-cid="25" data-ordid="223150"><i class="fa-trash-alt">Delete</i></span></td> </tr> </tbody> </table>