如何從數據表的一行中獲取元素？

Question

我有一個簡單的數據表，顯示了從 API 端點接收的一些 JSON 數據。

我添加了一個列，該列將在表格的每一行上放置一個按鈕。 當點擊此按鈕時，將觸發一個 AJAX 請求，該請求的值為該特定行的id 。

此實際代碼有效，但現在，我不僅要發送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

您可以使用 DataTables render函數的full參數來存儲當前選擇的行的值。 通過這種方式：

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

在上面的代碼中， data-status數據屬性將通過使用btoa()包含 base64 中當前對象值的字符串化版本。 在 base64 中，由於某種原因我們不能直接將對象的字符串化版本存儲在按鈕的 data 屬性中。

然后，在按鈕的點擊事件中，您必須執行以下操作：

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>

希望這可以幫助！