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

Question

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

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

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

Answer 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：如何提交所有页面表单数据 - 直接提交以获取更多详细信息和示例。

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

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

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：如何提交所有页面表单数据 - 通过 Ajax 提交。

笔记

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

链接

有关更多详细信息，请参阅jQuery DataTables：如何提交所有页面表单数据。