[英]Checkboxes only work on first page - Datatables, rails
Senario : So basically I'm using DataTables and have checkboxes on its first column. Senario :所以基本上我正在使用DataTables并在其第一列上有复选框。 My DataTables have multiple pages (pagination). 我的DataTables有多个页面(分页)。
The Problem: When I check a few boxes on a page (could be any page), AND also check a few on OTHER pages. 问题:当我检查页面上的几个框(可能是任何页面)时,还要检查其他页面上的一些框。
The results only gets saved if I am on the current page 如果我在当前页面上,结果只会被保存
I'm quite new to datatables/javascript and can't really figure out how to solve this issue. 我对datatables / javascript很新,并且无法弄清楚如何解决这个问题。
$('#formDataTable').DataTable({
responsive: true,
autoWidth: true,
"bFilter": true,
"bRetrieve": true,
"bInfo": true,
"sPageFirst": false,
"sPageLast": false,
});
I have read these SO pages. 我看过这些SO页面。 Checkboxes will only work on current pagination page in jQuery datatables Link is currently dead to this question -> Pagination with selected check boxes. 复选框仅适用于jQuery数据表中的当前分页页面链接目前已死于此问题 - > 选中复选框的分页。 Checkboxes will only work on current pagination page. 复选框仅适用于当前分页页面。 jQuery datatables jQuery数据表
jQuery DataTables removes non-visible rows from DOM for performance reasons, that is why when you submit the form only visible checkboxes get submitted. 出于性能原因,jQuery DataTables从DOM中删除不可见的行,这就是为什么当您提交表单时,只有可见的复选框被提交。
You may need to turn those <input type="checkbox">
that are checked and don't exist in DOM into <input type="hidden">
upon form submission. 可能需要将这些<input type="checkbox">
被检查并在DOM中不存在进<input type="hidden">
在表单提交。
For example, to submit form with values of all checkboxes: 例如,要提交包含所有复选框值的表单:
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)
);
}
}
});
});
If you're submitting the form via Ajax, it's even simpler. 如果您通过Ajax提交表单,那就更简单了。
For example, to submit form via Ajax with values of all checkboxes: 例如,要通过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);
});
});
See our article jQuery DataTables: How to submit all pages form data for demonstration. 请参阅我们的文章jQuery DataTables:如何提交所有页面表单数据以供演示。
if you are using Rails what about using Form Helpers ? 如果您使用Rails,使用表单助手怎么样?
If you are creating a new record, one simple example is: 如果要创建新记录,一个简单的示例是:
<%= 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 %>
Even if you have several pages, if you keep all your form helpers inside the form_for
method, everything should be saved to your database. 即使您有多个页面,如果您将所有表单助手保留在form_for
方法中,则所有内容都应保存到您的数据库中。
after trying lots of way finally i found this sweet and simple way of solving this problem!!!! 在尝试了很多方式后,我终于找到了解决这个问题的这种甜蜜而简单的方法! here #contect_form is form id ...you must put your data table inside a form coz on page load you can initialize datatable rows 这里#contect_form是表单id ...你必须把你的数据表放在一个表单中,在页面加载时你可以初始化数据表行
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) ); } }); }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.