如何在 HTML 数据表的每一行中添加一个表单？

Question

我有一个用 Ajax 源数据生成的普通表，它看起来像这样：

阿贾克斯

<script>
 $(document).ready(function() {
    $('#mytable').DataTable( {
        "ajax": "myurl",
        "dataType": 'json',
        "dataSrc": '',

        "columns": [
          {"data": "item"},
          {"data": "status"},
          {"data": "price"},
      ]

    } );
} );
</script>

html

 <table id="mytable" class="display" style="width:100%">
  <thead>
      <tr>
          <th>ITEM</th>
          <th>STATUS</th>
          <th>PRICE</th>
      </tr>
  </thead>
</table>

我想在这个表中添加一个新列，基本上每一行都应该有一个表单，当点击时，将触发一个包含字段Status值的 Ajax 请求，所以我应该有：

<th>ITEM</th>
<th>STATUS</th>
<th>PRICE</th>
<th>BUTTON</th>

这是我的表格：

<script>
$(document).ready(function () {
    $("#myform").submit(function (event) {
        callAJAX( "myurl/",
         {"X-CSRFToken": getCookie("csrftoken") },
         parameters={'status': $('status').val()},

        'post',
         function(data){
          console.log('submitted')


         }, null, null );
 return false; 
  });

});
</script>



<form method='post' id='myform'>
  {% csrf_token %}
  <input type="hidden" id="status"/>
  <button name="button1" type="submit" class="btn btn-primary">SEND</button>
</form>

因此，每一行都有四个字段： item 、 status 、 price 、 button 。 在每一行的列button下方都有一个button 。 当某行上的按钮被点击时，ajax 应该发送一个带有该特定行status值的 post 请求。 有什么办法吗？ 这里最大的问题是将表单添加到数据表中，我没有找到太多关于如何做的信息。 任何建议表示赞赏

Answer 1

如果通过 AJAX 提交值，则不需要表单。 您可以添加一个事件处理程序来捕获按钮单击事件，然后通过 AJAX 发送值。 您知道要发送的值与单击的按钮位于同一行。 您可以遍历 DOM 以获取值，或者在构建 DataTable 的行时将该值作为数据属性添加到按钮。

$('#mytable').DataTable( {
    "ajax": "myurl",
    "dataType": 'json',
    "dataSrc": '',

    "columns": [
      {"data": "item"},
      {"data": "status"},
      {"data": "price"},
      {"data": "status"}
  ],
  "columnDefs": [
            {
                "targets": [3],
                "searchable": false,
                "orderable": false,
                "render": function (data, type, full) {
                    return '<button type="button" class="btnClick" data-status="replace">Send</button>'.replace("replace", data);
                }
            }
        ]
} );

因此，在上面的代码中，我添加了一个保存状态值的第 4 列，并且该值呈现为按钮上的数据属性。 我还添加了一个类，以便轻松绑定点击事件：

$(document).on('click','.btnClick', function() {
   var statusVal = $(this).data("status");
   console.log(statusVal);
   //do the AJAX call...
});

这是一个 Fiddle Demo （您会注意到，为了示例的目的，我必须调整 DataTable 的数据源）