如何使用 jQuery DataTables 发布整个表的数据

Posted 2023-03-10

【中文标题】如何使用 jQuery DataTables 发布整个表的数据

【英文标题】：How to post data for the whole table using jQuery DataTables

【发布时间】：2015-10-03 18:20:48

【问题描述】：

我有一个使用 jQuery DataTables 和分页的表格

我有 300 多个注册表，每页最多 50 个。每次我从一个页面更改为另一个页面时，其他 250 个注册表都会从 DOM 中删除，因此当我向控制器提交并执行 POST 时，我只会得到一个包含 50 个模型的列表，这些模型是我当前页面上的模型。

我如何访问其他 250 个，或者告诉表将它们全部发送？我已经搜索并且我已经读到这是分页的正常行为。但是你们是如何解决这个问题的呢？

【问题讨论】：

好的...首先是一个问题。为什么要另外 250 个？如果您想要全部 300，只需将页面大小更改为 300。分页的想法是减少请求页面的加载时间。

因为我在每个注册表中都有一个复选框，取决于选中的复选框，我会做某些事情。我做了分页，所以他们不必滚动那么多。谢谢先生。

发布模型、视图和控制器。如果我们能看到代码，提供解决方案会容易得多。

【参考方案1】：

原因

当使用带有分页的 DataTables 插件时，为了性能和兼容性，DOM 中只存在当前页面行。因此，当您提交表单时，只会提交当前页面表单控件值。

解决方案 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)
         );
      
   );
);

有关更多详细信息和示例，请参阅jQuery DataTables: How to submit all pages form data - Submit directly。

解决方案 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);
      
   );
);

有关更多详细信息和示例，请参阅jQuery DataTables: How to submit all pages form data - Submit via Ajax。

注意事项

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

链接

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

【讨论】：

非常感谢 Gyrocode，感谢您的帮助，现在我得到了所有元素，虽然我有一个问题，这个元素列表是视图模型的属性，我如何发布所有其他属性并使用我从数据表中获取的列表更改某个属性？

解决方案 1 很有效。我只是做了一个小改动，只选择选中的复选框 -> table.$("input[type='checkbox']").serializeArray(); 所以它在 Rails 5 中工作，正如我想要的那样，具有强大的参数。