如何使用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: 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。

注意

请注意，这两种解决方案仅适用于客户端处理模式。

LINKS

有关详细信息，请参阅jQuery DataTables: How to submit all pages form data。