jQuery datatables - как получить значение строки

Question

это мой первый вопрос здесь, но я учусь на stackoverflow с годами.

В моем локальном приложении (PHP, MySql, Html, Javascript) у меня есть jQuery datatable, и в последнем столбце пользователь может показать (в формате PDF) или удалить строку, щелкнув по значку (-> использует fontawesome).
Данные в таблице поставляются с Ajax из JSON file.

Вот код данных HTML:

<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>
...

Для удаления строки я ранее запустил функцию Javascript, с запросом Ajax, выполняющим необходимы операции с базой данных, но я не смог интегрировать функциональность удаления строки из моей таблицы данных.

Затем я изменил свою стратегию, начиная с таблицы данных, запускающей событие click на значке.
Благодаря этому я смог успешно удалить строку из таблицы данных (НЕ базы данных!), Но не смог выяснить, как получить необходимые идентификаторы для запуска операций удаления. Я записываю эти идентификаторы (customer-id: cid, order-id: ordid) в .

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

Моя проблема в том, что я не могу чтобы получить идентификаторы в . Глядя на (Firefox) отладчик, я вижу их в "(this) - parentElement: span - набор данных: DOMStringMap (2) - cid: 25 и ordid: 223150".
Пробовал такие вещи, как: "var cid = table1.row ($ (this) .dataset ('cid') "и варианты, но у меня ничего не сработало, и, к сожалению, мои jQuery знания очень просты c. Я искал ответ в течение нескольких часов, но не нашел решение.

Может ли кто-нибудь указать мне правильное направление, или даже дать какое-нибудь объяснение, как получить значение, когда jQuery видит точное положение в Firefox отладчике?

Answer 1

Вы можете попробовать следующий код, вы можете получить объект события в слушателе, а затем получить атрибуты из родительского диапазона.

  $(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>