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?

Hamza Arshad · Accepted Answer · 2020-05-04 13:51:43Z

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>

answered May 4, 2020 at 13:51

Hamza Arshad

8465 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

counteredge Over a year ago

Thank you very much! This works great now and you really saved my day. So how can I upvote your answer? I didn't find any hints on how to do this.

Hamza Arshad Over a year ago

Great! Can you upvote and accept this as an answer?

counteredge Over a year ago

OK, found how to accept the answer, clicked also on the UP-arrow, but my vote will not show up, cause I don't have any reputations yet.

Collectives™ on Stack Overflow

jQuery datatables - how to grab row value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related