如何使用jQuery DataTables发布整个表的数据 [英] How to post data for the whole table using jQuery DataTables

问题描述

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

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

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

解决方案

原因

将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){
   // 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:如何提交所有页面表单数据-通过Ajax提交以获取更多详细信息和示例.

注释

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

链接

请参见 jQuery数据表:如何提交所有页面表单数据以获取更多详细信息.

I have a table working with jQuery DataTables and pagination

I have over 300 registrys which 50 are the max on each page. Every time I change from page to page the other 250 registrys are removed from DOM so when I submit and do the POST to my controller I only get a list of 50 models which are the ones on my current page.

How do I access the other 250, or tell the table to send them all? I have searched and I have read that this is the normal behavior of pagination. But how do you guys work around it?

解决方案

CAUSE

When using DataTables plug-in with pagination only current page rows exist in the DOM for performance and compatibility. Therefore when you submit the form, only current page form controls values are being submitted.

SOLUTION 1: Submit form directly

The trick is to turn form elements from pages other than current into <input type="hidden"> before submitting the form.

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)
         );
      }
   });
});

See jQuery DataTables: How to submit all pages form data - Submit directly for more details and examples.

SOLUTION 2: Submit form via Ajax

Another solution is to submit the form via 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);
      }
   });
});

See jQuery DataTables: How to submit all pages form data - Submit via Ajax for more details and examples.

NOTES

Please note that both solutions will work in client-side processing mode only.

LINKS

See jQuery DataTables: How to submit all pages form data for more details.

这篇关于如何使用jQuery DataTables发布整个表的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！