带有Rails的DataTable无法提交多个页面项目

Posted 2023-05-09

【中文标题】带有Rails的DataTable无法提交多个页面项目

【英文标题】：DataTable with Rails Failed to submit multiple pages items

【发布时间】：2017-03-02 00:40:45

【问题描述】：

我正在使用 jquery 数据表从 Rails 应用程序的 html 中查看后端的表数据

当我使用复选框选择任何记录/行以在后端提交时，比如说从第 1 页开始，并在第 2 页上检查了一些项目并点击确认按钮。在后端收到的项目只是当前页面。

例如，如果从第 2 页检查项目并单击确认按钮，则提交到后端的项目仅来自已检查的第 2 页，如果从第 1 页检查项目并单击确认按钮，则提交到后端的项目仅从已检查的第 1 页开始。

正如我试图实现的预期行为是在提交确认时，数据表应该在页面上传输检查的项目，这目前没有发生。

任何人都可以帮忙，这是否可以通过数据表实现，或者它是库中的错误。 欢迎所有建议。

【问题讨论】：

这个问题和ruby无关，我把标签去掉了。

@Hard 确认按钮操作是 AJAX 调用吗？

不，这不是 Ajax 调用

【参考方案1】：

如果是服务端分页，是无法实现的。

更新

如果是客户端分页，你可以将所有选中的复选框值附加到提交jQuery操作方法中并在服务器中处理。

【讨论】：

这是客户端分页，所有记录都在页面加载时呈现在客户端，如果我检查了第 1 页上的 2 条记录和第 2 页上的 2 条记录，则检查的记录都保留，直到请求提交到服务器.

【参考方案2】：

正如@manivel 正确提到的，如果您使用服务器端处理，这是不可能的。

对于客户端处理，有几种方法可以做到这一点。

解决方案 1：直接提交表单

诀窍是在提交表单之前将非当前页面的表单元素转换为<input type="hidden">。

var table = $('#example').DataTable();

// Handle form submission event
$('#frm-example').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)
         );
      
   );
);

有关代码和演示，请参阅this example。

解决方案 2：通过 Ajax 提交表单

另一种解决方案是通过 Ajax 提交表单。

var table = $('#example').DataTable();

// Handle form submission event
$('#frm-example').on('submit', function(e)
   // Prevent actual form submission
   e.preventDefault();

   // Serialize form data
   var data = table.$('input,select,textarea').serialize();

   // Submit form data via Ajax
   $.ajax(
      url: '/echo/jsonp/',
      data: data,
      success: function(data)
         console.log('Server response', data);
      
   );
);

有关代码和演示，请参阅 this example。

注意事项

请注意，这两种解决方案都只能在客户端处理模式下工作。

链接

更多详情请见jQuery DataTables: How to submit all pages form data。

【讨论】：

非常感谢 Gyrocode.com ，它现在按预期工作。