Charles Tang Charles Tang - 1 year ago 91
HTML Question

DataTable Checkboxes not getting value

Long story short, So I am trying to use "POST" to obtain checkboxes value in my Flask Template. However I am using some dynamic table in Datatable (datatable-buttons) in my template. And these Datatable causes my post request to not work. (Without using the datatable, if it's just a long regular table, then my post request will work)

What would be a correct way to parse DataTable Checkboxes value to POST request? Does anyone know what is wrong with my datatable definition?

Lots of thanks!

In Flask:

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


HTML with Flask Template:

<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>


DataTable Components

$(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
});
}
};
}

Answer Source

CAUSE

jQuery DataTables removes non-visible rows from DOM for performance reasons. When form is submitted, only data for visible checkboxes is sent to the server.

SOLUTION 1. Submit form

You need to turn elements <input type="checkbox"> that are checked and don't exist in DOM into <input type="hidden"> upon form submission.

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)
            );
         }
      } 
   });          
});

SOLUTION 2: Send data via 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: How to submit all pages form data for more details.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download