DataTable复选框没有价值 [英] DataTable Checkboxes not getting value
问题描述
长话短说,所以我试图使用 POST来获取我的Flask模板中的复选框值。但是,我在模板的Datatable(数据表按钮)中使用了一些动态表。这些数据表导致我的帖子请求不起作用。 (不使用数据表,如果它只是一个长的常规表,那么我的发布请求将起作用)
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)
将DataTable Checkboxes值解析为POST请求的正确方法是什么? ?有人知道我的数据表定义有什么问题吗?
What would be a correct way to parse DataTable Checkboxes value to POST request? Does anyone know what is wrong with my datatable definition?
非常感谢!
在烧瓶中:
def project():
if request.method=="POST":
selected_tags=request.form.getlist('table_records')
$具有烧瓶模板的b $ b
HTML:
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组件
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
});
}
};
}
推荐答案
原因
jQuery DataTables删除不可见的行由于性能原因而从DOM中获取。提交表单后,仅将可见复选框的数据发送到服务器。
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.
您需要将已检查且在DOM中不存在的元素< input type = checkbox>
转换为<输入类型提交表单后,= = hidden>
。
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)
);
}
}
});
});
解决方案2:通过Ajax发送数据
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);
});
});
链接
请参见 jQuery DataTables:如何提交所有页面表单数据了解更多详情。
这篇关于DataTable复选框没有价值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!