Senario :所以基本上我正在使用DataTables并在其第一列上有复选框。我的DataTables有多个页面(分页)。
问题:当我检查页面上的几个框(可能是任何页面)时,还要检查其他页面上的一些框。
如果我在当前页面上,结果只会被保存
我对datatables / javascript很新,并且无法弄清楚如何解决这个问题。
$('#formDataTable').DataTable({
responsive: true,
autoWidth: true,
"bFilter": true,
"bRetrieve": true,
"bInfo": true,
"sPageFirst": false,
"sPageLast": false,
});
我已阅读这些SO页面。 Checkboxes will only work on current pagination page in jQuery datatables 链接目前已死于此问题 - > Pagination with selected check boxes. Checkboxes will only work on current pagination page. jQuery datatables
答案 0 :(得分:11)
jQuery DataTables出于性能原因从DOM中删除不可见的行,这就是为什么当您提交表单时,只有可见的复选框被提交。
在提交表单时,您可能需要将已检查但不存在于DOM中的<input type="checkbox">
转换为<input type="hidden">
。
例如,要提交包含所有复选框值的表单:
var table = $('#example').DataTable();
$("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)
);
}
}
});
});
如果您通过Ajax提交表单,那就更简单了。
例如,要通过Ajax提交表单,其中包含所有复选框的值:
var table = $('#example').DataTable();
$("#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: How to submit all pages form data进行演示。
答案 1 :(得分:0)
如果你使用Rails,那么使用Form Helpers呢?
如果要创建新记录,可以使用一个简单示例:
<%= form_for(:table_name, :action => 'create') do |f| %>
<table summary="Form data table">
<tr>
<th><%= f.label(:responsive) %></th>
<td><%= f.check_box(:responsive) %></td>
</tr>
<tr>
<th><%= f.label(:auto_width) %></th>
<td><%= f.check_box(:auto_width) %></td>
</tr>
</table>
<%= submit_tag("Create Page") %>
<% end %>
即使您有多个页面,如果您将所有表单助手保留在form_for
方法中,则所有内容都应保存到您的数据库中。
答案 2 :(得分:0)
var table;
$(document).ready(function () {
table = $('#table_id').DataTable({
scrollY: "412px",
scrollX: true,
AutoWidth: false,
scrollCollapse: false,
paging: true,
});
$('#contact_form').on('submit', function (e) {
var form = this;
// Encode a set of form elements from all pages as an array of names and values
var params = table.$('input,select,textarea').serializeArray();
// Iterate over all form elements
$.each(params, function () {
// If element doesn't exist in DOM
if (!$.contains(document, form[this.name])) {
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
});
});
});
&#13;