Как я могу получить элемент из строки данных?

Question

У меня есть простой набор данных, который показывает некоторые данные JSON, полученные от конечной точки API.

Я добавил столбец, который будет содержать кнопку в каждой строке таблицы. При нажатии этой кнопки будет запущен запрос AJAX со значением id для этой строки Speci c.

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

По другому вопросу мне сказали использовать атрибуты данных, но я не знаю, как бы я интегрировал это в мой текущий код , Любой совет приветствуется.

$(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">Submit</button>'.replace("replace", data);
      }
    }]
  });
});

Answer 1

Вы можете использовать параметр full функции DataTables render, чтобы сохранить значения текущей выбранной строки. Таким образом:

return '<button type="button" class="btnClick sellbtn" data-status="' + btoa(JSON.stringify(full)) + '">Submit</button>';

В приведенном выше коде атрибут данных data-status будет содержать строковую версию текущего значения объекта в base64 с помощью btoa() . В base64, потому что по какой-то причине мы не можем напрямую сохранить строковую версию объекта в атрибуте данных кнопки.

Затем в событии нажатия кнопки необходимо выполнить:

1. Расшифруйте строковый объект, используя atob().
2. Разбор в объект с помощью JSON.parse().

Примерно так:

$(document).on('click', '.btnClick', function() {

  var statusVal = $(this).data("status");

  // Decode the stringified object.
  statusVal = atob(statusVal);

  // Parse into object.
  statusVal = JSON.parse(statusVal);

  // This object contains the data of the selected row through the button.
  console.log(statusVal);

  return false;
});

Затем, когда вы нажмете на кнопку, вы увидите это:

Итак Теперь вы можете использовать этот объект для отправки в callAJAX() функции.

См. в этом примере:

$(function() {
  $(document).on('click', '.btnClick', function() {

    var statusVal = $(this).data("status");

    // Decode the stringified object.
    statusVal = atob(statusVal);

    // Parse into object.
    statusVal = JSON.parse(statusVal);

    // This object contains the data of the selected row through the button.
    console.log(statusVal);

    return false;
  });

  let dataSet = [{
      "id": 1,
      "item": "Item 1",
      "price": 223.22
    },
    {
      "id": 2,
      "item": "Item 2",
      "price": 243.22
    },
    {
      "id": 3,
      "item": "Item 3",
      "price": 143.43
    },
  ];
  let orderstable = $('#myTable').DataTable({
    "data": dataSet,
    "columns": [{
      "data": "item"
    }, {
      "data": "price"
    }, {
      "data": "id"
    }, ],
    "columnDefs": [{
      "targets": [2],
      "searchable": false,
      "orderable": false,
      "render": function(data, type, full) {

        // Encode the stringified object into base64.
        return '<button type="button" class="btnClick sellbtn" data-status="' + btoa(JSON.stringify(full)) + '">Submit</button>';
      }
    }]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="myTable" class="display" width="100%"></table>

Надеюсь, это поможет!