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

Question

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

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。每行的按钮列下方都有一个按钮。当点击一行上的按钮时，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);
                }
            }
        ]
} );

因此，通过上面的代码，我添加了第四列来保存状态值，并且该值将呈现为按钮上的数据属性。我还添加了一个类，以便可以轻松绑定(bind)点击事件:

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

Here is a Fiddle Demo(您会注意到，为了示例的目的，我必须调整 DataTable 的数据源)