数据表复选框没有获得价值

长话短说，所以我尝试使用“POST”来获取我的 Flask 模板中的复选框值。但是，我在模板中的数据表（数据表按钮）中使用了一些动态表。这些数据表导致我的发布请求不起作用。 （在不使用数据表的情况下，如果它只是一个很长的常规表，那么我的发布请求将起作用）

将 DataTable Checkboxes 值解析为 POST 请求的正确方法是什么？有谁知道我的数据表定义有什么问题？

非常感谢！

在烧瓶中：

def project():
   if request.method=="POST":
     selected_tags=request.form.getlist('table_records')

带 Flask 模板的 HTML：

   <form action="" method="post">

   <button type="submit" name="Compare" value="Compare" class="btn-link">Compare</button>

   <table id="datatable-buttons" class="table table-striped table-bordered bulk_action">
     <thead>
          <tr>
            <th><input type="checkbox" id="check-all" class="flat"></th>
            <th>Tag</th>
            <th>Release date</th>
            <th>Number of Blocks</th>
          </tr>
     </thead>



{% for each_run in all_runs %}
          <tr>
             <td><input type="checkbox" class="flat" name="table_records[]" value="{{each_run.tag}}"></td>
             <td class=" "><a href= "{{url_for('skybolt_synthesis_tag',tag=each_run.tag)}}"> {{each_run.tag}}</a></td>
             <td>{{each_run.start_time}}</td>
             <td>{{block_count[each_run.tag]}}</td>
             </tr>
{% endfor %}
    </form>

数据表组件

$(document).ready(function() {
    var handleDataTableButtons = function() {
      if ($("#datatable-buttons").length) {
        $("#datatable-buttons").DataTable({
          dom: "Bfrtip",
          buttons: [
            {
              extend: "copy",
              className: "btn-sm"
            },
            {
              extend: "csv",
              className: "btn-sm"
            },
            {
              extend: "excel",
              className: "btn-sm"
            },
            {
              extend: "pdfHtml5",
              className: "btn-sm"
            },
            {
              extend: "print",
              className: "btn-sm"
            },
          ],
          responsive: true
        });
      }
    };
}

CAUSE

出于性能原因，jQuery DataTables 从 DOM 中删除不可见的行。提交表单时，仅将可见复选框的数据发送到服务器。

解决方案 1. 提交表格

你需要转动元素<input type="checkbox">已检查且不存在于 DOM 中<input type="hidden">提交表格后。

var table = $('#example').DataTable({
   // ... skipped ...
});

$('form').on('submit', function(e){
   var $form = $(this);

   // Iterate over all checkboxes in the table
   table.$('input[type="checkbox"]').each(function(){
      // If checkbox doesn't exist in DOM
      if(!$.contains(document, this)){
         // If checkbox is checked
         if(this.checked){
            // Create a hidden element 
            $form.append(
               $('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         }
      } 
   });          
});

解决方案 2：通过 Ajax 发送数据

var table = $('#example').DataTable({
   // ... skipped ...
});

$('#btn-submit').on('click', function(e){
   e.preventDefault();

   $.ajax({
      url: '/path/to/your/script.php',
      data: table.$('input[type="checkbox"]').serialize();
   }).done(function(data){
      console.log('Response', data);
   });
});

LINKS

See jQuery DataTables：如何提交所有页面表单数据 https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/更多细节。