Отправка данных таблицы с Javascript с HTML Datatables

Question

У меня есть простой набор данных, который показывает JSON данные, полученные из API. Я отредактировал свою таблицу так, чтобы для каждой строки была кнопка, которая при нажатии отправляет запрос Ajax на URL-адрес, содержащий значение для этой указанной c строки.

Ниже приведена функция, которая отправит запрос, и функция, которая будет отображать таблицу. В моей таблице три столбца, при нажатии кнопки X значение столбца id для этой строки будет отправлено в виде запроса Ajax на внешний URL-адрес.

Этот код работает, но единственная проблема заключается в том, что наряду со значением id я хотел бы отредактировать таблицу так, чтобы при нажатии кнопки значение столбца item было отправлено вместе с id , так что мой ajax запрос может отправлять item и id, а не только id. Может кто-нибудь дать мне совет, как это сделать? Заранее спасибо!

$(document).ready(function() {
  $(document).on('click', '.btnClick', function() {
    var statusVal = $(this).data("status");
    console.log(statusVal)

    callAJAX("/request_handler", {
      "X-CSRFToken": getCookie("csrftoken")
    }, parameters = {
      'orderid': statusVal
    }, 'post', function(data) {
      console.log(data)
    }, null, null);

    return false;
  });

  let orderstable = $('#mytalbe').DataTable({
    "ajax": "/myview",
    "dataType": 'json',
    "dataSrc": '',
    "columns": [{
      "data": "item"
    }, {
      "data": "price"
    }, {
      "data": "id"
    },],
    "columnDefs": [{
      "targets": [2],
      "searchable": false,
      "orderable": false,
      "render": function(data, type, full) {
        return '<button type="button" class="btnClick sellbtn" data-status="replace">X</button>'.replace("replace", data);
      }
    }]
  });
});

Answer 1

Используйте html атрибуты данных, затем извлеките их из строки, по которой щелкали / работали, и отправьте их вместе.

<col data-item="$thisItem" id="a1" ><button class='a1' /></col>
$.click((e) => {
  let class = "a1"; // use the relevant references or use jQuery's parent(), etc
  let colId = $("col#"+class);
  let data = colId.data['data-item']; // this way you have your item info in the scope, and you can send it.

от: https://api.jquery.com/data/