javascript - 如何从数据表的行中获取元素？

Question

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

我添加了一列，该列将在表格的每一行上放置一个按钮。点击此按钮后，将使用该特定行的id值触发AJAX请求。

这个实际的代码是有效的，但是现在，我不仅仅发送 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>

希望这有帮助!