如何使用 jQuery DataTables post 整个 table 的数据

Question

我有一个 table 使用 jQuery DataTables 和分页

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

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

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: 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。

如何使用 jQuery DataTables post 整个 table 的数据

How to post data for the whole table using jQuery DataTables

asp.net-mvc

jquery

pagination

datatables

原因

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

解决方案 2：通过 Ajax

注意事项

链接