如何从数据表的一行中抓取一个元素？

Question

我有一个简单的数据表，其中显示了从 API 端点接收的一些 JSON 数据。

我添加了一个列，该列将在表格的每一行上保留一个按钮。当点击此按钮时，将针对该特定行触发一个值为id 的AJAX 请求。

此实际代码有效，但现在，我不仅要发送id 的值，还想编辑表格，以便在按下按钮时发送id 和@ 的值该行的 987654324@。有人可以给我一些关于如何做到这一点的建议吗？

在另一个问题上，有人告诉我使用数据属性，但我真的不知道如何将它集成到我当前的代码中。任何建议表示赞赏。

$(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 中，因为某些原因我们不能直接将对象的字符串化版本存储在按钮的数据属性中。

那么，在按钮的点击事件中，你要做的就是：

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>

希望这会有所帮助！